I'm trying to use postUserData so that if a person fills in and submits a form on one page of my website, it submits the data to a form on a different page on my website.
It all worked until I introduced a checkbox named writerep to my form, as my CMS autogenerates the checkbox name on the final form (in this case, the catchy "custom-1798_0", and because that ID/name contains a hyphen, it breaks the JSON. Other checkbox without hyphen works fine. Code below:
$('#user_info_form').validate({
submitHandler: function submitHandler(form, e) {
e.preventDefault();
var firstname = e.target.firstname.value;
var lastname = e.target.lastname.value;
var email = e.target.email.value;
var country = e.target.country.value;
var writerep = e.target.writerep.checked;
var emailopt = e.target.emailopt.checked;
userInfo = {
firstname: firstname,
lastname: lastname,
email: email,
country: country,
custom-1798_0: writerep? 1 : 0,
email_opt_in: emailopt ? 1 : 0
};
postUserData(userInfo, 'https://*********');
nextSlide('.slide1');
},
rules: {
firstname: "required",
lastname: "required",
country: "required",
email: {
required: true,
email: true
}
},
messages: {
firstname: "Please enter your first name",
lastname: "Please enter your last name",
country: "Please select your country",
email: {
required: "Please enter your email address",
email: "Please enter a valid email address"
}
}
});
Without renaming the checkbox on the final form, which isn't possible due to CMS limitations, is there a way of making this work?
You have to quote property names that have special characters or spaces in them. Some are allowed like $ and _ but - is not since it is also an operator
userInfo = {
firstname: firstname,
lastname: lastname,
email: email,
country: country,
'custom-1798_0': writerep? 1 : 0,
email_opt_in: emailopt ? 1 : 0
};
Related
I have 3 fields phone1, phone2 and phone3.
I want to do a validation so it should alert if all are empty. Means if any one of these 3 field have value then the validation should Pass and don't alert.
I have used Yup library for this.
Right now I have create below code which actually requires all the 3 fields. Which I don't want.
yup.object().shape({
phone1: yup
.string()
.required("Please enter Phone 1"),
phone2: yup
.string()
.required("Please enter Phone 2"),
phone3: yup
.string()
.required("Please enter Phone 3"),
});
I belive I have to use .test() method of Yup JS which allows custom validation but I am not sure how I can write it in this situation. I am using Express framework to read requests.
const schema = yup.object().shape({
phone1: yup.string().when(['phone2', 'phone3'], {
is: (phone2, phone3) => !phone2 && !phone3,
then: yup.string().required('Please enter one of the three fields')
}),
phone2: yup.string().when(['phone1', 'phone3'], {
is: (phone1, phone3) => !phone1 && !phone3,
then: yup.string().required('Please enter one of the three fields')
}),
phone3: yup.string().when(['phone1', 'phone2'], {
is: (phone1, phone2) => !phone1 && !phone2,
then: yup.string().required('Please enter one of the three fields')
})
}, [['phone1', 'phone2'], ['phone1', 'phone3'], ['phone2','phone3']])
Then you can check this validation through this way:
schema.validate({ phone1: '', phone2: '', phone3: '' }).catch(function (err) {
console.log(err.errors[0]);
});
Enter any of the three fields for getting no error message.
e.g
schema.validate({ phone1: '', phone2: '123', phone3: '' }).catch(function (err) {
console.log(err.errors[0]);
});
{
key: "username",
$asyncValidators: {
'asynch': function(username) {
var deferred = $q.defer();
$timeout(function(){
for(var i=0; i<=RegUsers.users.length-1; i++) {
console.log(RegUsers.users[i].username);
//If username is present in RegUsers
if(username === RegUsers.users[i].username) {
console.log(username + " matches " + RegUsers.users[i].username);
deferred.reject();
}else {
deferred.resolve();
}//$timeout end
} //for loop end
}, 200);//
return deferred.promise;
}// asynch function end
}, // $asyncValidators obj end
validationMessage: {
'async': "Username Already Taken"
}//validationMessage end
},//first obj end
Using Angular Schema Form, I am trying to create an async validation on the username input but the validation only works for the first matched object in the RegUsers.users array. This is a service I created which has a collection of user details. When looped through the 'async': function(username) matches and only validates the first object's username. It also does match the rest of the usernames but the form does not validate as required. For example:
RegUsers.users = [
{
username: "user1",
email: "user1#gmail.com",
message: "Hello, my name is user1 "
},
{
username: "user2",
email: "user2#gmail.com",
message: "Hello, my name is user2 "
},
{
username: "user3",
email: "user3#gmail.com",
message: "Hello, my name is user3 "
},
{
username: "user4",
email: "user4#gmail.com",
message: "Hello, my name is user4 "
}
];
In the form, if you enter user1 in the username input field, it will be validated and output the error message: "Username Already Taken". But if you enter user2, user3 or user4 none of these get validated but are matched against RegUsers.users, therefore the form stays $valid insted of $invalid. I don't know why it isn't functioning properly and also...
I am still learning angularJs and this is the first encounter with promises as I am following the DOCS on Angular Schema Form to validate the form I have constructed.
So I made my own user adding form so that only logged in users can add new ones. Here's my Jade:
template(name="userAdd")
.sixteen.wide.column
h1 Add new user
form#userAddForm.ui.form
.field.required
label(for="username") Username:
input(type="text" name="username")#username
.field.required
label(for="email") Email:
input(type="email" name="email")#email
.field.required
label(for="password") Password:
input(type="password" name="password")#password
.field.required
label(for="realname") Real Name:
input(type="text" name="realname")#realname
.field.required
label(for="bio") Bio:
textarea(rows="3" name="bio")#bio
button(type="submit")#usersubmit.ui.button.primary Submit
And the Javascript:
Template.userAdd.events({
'click #usersubmit': function (evt) {
Accounts.createUser({
username: $('input #username').val(),
email: $('input #email').val(),
password: $('input #password').val(),
profile: {
realname: $('input #realname').val(),
bio: $('input #bio').val()
}
})
Router.go('/')
}
})
For some reason, this only redirects me back to the same page and doesn't do anything, not even something shows in the dev console. What am I doing wrong?
Because it is actually submitting the form. You need to stop the form from submitting. Use the following code.
Template.userAdd.events({
'submit form': function(event){
event.preventDefault();
Accounts.createUser({
username: event.target.username.value,
email: event.target.email.value,
password: event.target.password.value,
profile: {
realname: event.target.realname.value,
bio: event.target.bio.value
}
});
Router.go('/');
}
});
Notice that I use event.target.inputName.value which is the best practice way of dealing with form data in Meteor.
I'm using jquery validation plugin and need to use localization for different language.
The original code would be like this
$('#form').validate({
rules: {
'checkbox1[]': { required: true },
'email': { required: true,
email: true
},
},
messages: {
'checkbox1[]': "Please choose at least 3",
email: {
required:'Please input email',
email: 'Please input valid email'
}
}
});
If I use localization, my message_en.js would be:
$.extend($.validator.messages, {
required: "Please choose your answer.",
email: "Please input valid email.",
});
However, I shared the "required" message in email field. It means that if I didnt input email, the error message would become "Please choose your answer.". Obviously, it is not appropriate.
So, how can I separate the error message?
How can I change the general message of "This field is required" in Jquery form validation plugin to "このフィールドは必須です"? The color of the message can be changed by using the following code:
<style type="text/css">
label.error {color: red;}
</style>
But how to change the content?
I want to change all "This filed is required" messages.
I want to change all "required" messages to "このフィールドは必須です".
$(".selector").validate({
rules: {
name: "required",
email: {
required: true,
email: true
}
},
messages: {
name: "Please specify your name",
email: {
required: "We need your email address to contact you",
email: "Your email address must be in the format of name#domain.com"
}
}
})
only changes specific message for specific rule and specific element.
I wrote
messages: {
required:"このフィールドは必須です"
}
but it doesn't work.
I tried the accepted answer and it did not work for me at all. I did more searching on Google and found this article.
Using this line of code solved my problem:
$.validator.messages.required = "Your new required message here!";
The messages object has several interesting attributes to adjust:
messages: {
required: "This field is required.",
remote: "Please fix this field.",
email: "Please enter a valid email address.",
url: "Please enter a valid URL.",
...
}
See the source.
These can be set as defaults via the setDefaults() method:
$.validator.setDefaults({
messages: {
required: "このフィールドは必須です"
}
});
You can use the messages option in the validate method.