Keep getting this error. I've checked for hidden characters, deleted and retyped lines, etc. to no avail. Any ideas where this hidden character might be? I'm using almost identical code in another file which is working perfectly. Thanks!
$('#register-manager').validate({
rules:{
company-company_name: {
required: true
},
user-first_name: {
required: true
},
user-last_name: {
required: true
},
user-email: {
required: true,
email: true
},
user-password1: {
required: true,
min: 8
},
user-password2: {
required: true
}
},
messages: {
company-company_name: {
required: "Please enter your company's name."
},
user-first_name: {
required: "Please enter your first name."
},
user-last_name: {
required: "Please enter your last name."
},
user-email: {
required: "Please enter your email.",
email: "Please enter a valid email."
},
user-password1: {
required: "Please enter your password.",
min: "Please enter at least 8 characters."
},
user-password2: {
required: "Please verify your password."
}
},
submitHandler: function (form) {
form.submit();
}
});
There are no hidden characters (as far as I can tell). The problem is right there in the error message:
Unexpected token -
Identifiers in JS cannot contain - characters, try wrapping them in quotes like this:
$('#register-manager').validate({
rules:{
"company-company_name": {
required: true
},
"user-first_name": {
required: true
},
...
Related
TLDR version: I have a custom jquery validation the returns the correct values but the rule is not getting enforced.
I have a custom validation rule that looks like this:
$.validator.addMethod("isDomainValid", function(value, element) {
var domain = value.split("#");
$.get('/api/validate-domain/' + domain[1], function(data, status) {
domain = JSON.parse(data);
console.log(domain['status'] === 'valid');
return (domain['status'] === 'valid');
});
});
This validation calls a PHP API that checks if the email's domain name is live, hence correct. This API returns the correct values and the console.log() also reflects the correct values, which is the value I am returning as a boolean. All good so far...
I call this validation rule like this:
validator.validate({
rules: {
email: {
required: true,
email: true,
isDomainValid: true,
},
});
I also have some custom error messages (I think maybe irrelevant) like the following:
messages: {
email: {
required: "The Email Address cannot be empty",
isDomainValid: "Please correct the Email Address after the # character",
email: "Invalid Email Address format",
}, },
All my validations, including one other custom validation work flawlessly except this one. Here is all the code I am running in case someone wants to see the whole thing. Again, all validations work except the custom isDomainValid validation.
var validator = $('#checkout_form');
$.validator.addMethod("checkPoBox", function(value, element) {
let cleansedValue = $.trim(value.toLowerCase()).replace(/[^a-zA-Z]+/g, '');
let checked = $('#ship-box').prop('checked') ? true : false;
if (/pobox/i.test(cleansedValue) && checked && element.name == 'shipping_address') {
return false;
}
if (/pobox/i.test(cleansedValue) && !checked && element.name == 'billing_address') {
return false;
}
return true;
});
$.validator.addMethod("isDomainValid", function(value, element) {
var domain = value.split("#");
$.get('/api/validate-domain/' + domain[1], function(data, status) {
domain = JSON.parse(data);
console.log(domain['status'] === 'valid');
return (domain['status'] === 'valid');
});
});
validator.validate({
rules: {
email: {
required: true,
email: true,
isDomainValid: true,
},
billing_first_name: {
required: true
},
billing_last_name: {
required: true
},
billing_address: {
required: true,
checkPoBox: true
},
billing_city: {
required: true
},
billing_state: {
required: true
},
billing_zip: {
required: true,
minlength: 5,
maxlength: 5,
digits: true
},
billing_phone: {
required: true,
minlength: 10,
maxlength: 10,
digits: true
},
name_on_credit_card: {
required: true
},
credit_card_number: {
required: true,
creditcard: true
},
expiration_month: {
required: true
},
expiration_year: {
required: true
},
cvv: {
required: true,
minlength: 3,
maxlength: 4,
digits: true
},
shipping_first_name: {
required: function () {
return $('#ship-box').prop('checked');
}
},
shipping_last_name: {
required: function () {
return $('#ship-box').prop('checked');
}
},
shipping_address: {
required: function () {
return $('#ship-box').prop('checked');
},
checkPoBox: true
},
shipping_city: {
required: function () {
return $('#ship-box').prop('checked');
}
},
shipping_state: {
required: function () {
return $('#ship-box').prop('checked');
}
},
shipping_zip: {
required: function () {
return $('#ship-box').prop('checked');
},
minlength: 5,
maxlength: 5,
digits: true
},
shipping_phone: {
required: function () {
return $('#ship-box').prop('checked');
},
minlength: 10,
maxlength: 10,
digits: true
}
},
messages: {
email: {
required: "The Email Address cannot be empty",
isDomainValid: "Please correct the Email Address after the # character",
email: "Invalid Email Address format",
},
billing_first_name: "First Name cannot be blank",
billing_last_name: "Last Name cannot be blank",
billing_address: {
required: "Address cannot be blank",
checkPoBox: "Products cannot be shipped to a P.O. Box"
},
billing_city: "Town/City cannot be blank",
billing_state: "Please select a State",
billing_zip: "Please enter a valid 5 digit Zip Code",
billing_phone: "Please enter a valid 10 digit Phone Number",
name_on_credit_card: "Name on Card cannot be blank",
credit_card_number: "Please enter a valid Credit Car Number",
expiration_month: "Please select an Expiration Month",
expiration_year: "Please select an Expiration Year",
cvv: "Please enter a valid 3 or 4 digit CVV",
shipping_first_name: "First Name cannot be blank",
shipping_last_name: "Last Name cannot be blank",
shipping_address: {
required: "Address cannot be blank",
checkPoBox: "Products cannot be shipped to a P.O. Box"
},
shipping_city: "City cannot be blank",
shipping_state: "Please select a State",
shipping_zip: "Please enter a valid 5 digit Zip Code",
shipping_phone: "Please enter a valid 10 digit Phone Number",
},
invalidHandler: function(event, validator) {
if(validator.numberOfInvalids() > 0) {
event.preventDefault();
$('button#place_order_btn').text("PLACE ORDER");
return false;
}
},
submitHandler: function (validator) {
validator.submit();
}
});
Any help will be greatly appreciated.
I think you're running into a problem where the return value for the success callback function is lost in the $.get method. In my experience I've had to trigger errors manually as part of the callback when checking against the server in a similar way.
Alternatively, I was digging around and found some jQuery Validation documentation that seems like it would make what you are trying to do a little easier: https://jqueryvalidation.org/remote-method/
Try updating the rules.email properties, replacing isDomainValid:
rules: {
email: {
required: true,
email: true,
remote: {
url: function() {
var value = $("[name='email']").val();
var domain = value.split("#");
return "/api/validate-domain/" + domain[1];
},
}
},
You can remove the call to $.validator.addMethod that registers the "isDomainValid" method.
Also, don't forget to update isDomainValid elsewhere, replacing it with remote so the messages are correct.
messages: {
email: {
required: "The Email Address cannot be empty",
email: "Invalid Email Address format",
remote: "Please correct the Email Address after the # character",
},
I have the JQuery validations below that just ensure that something is written within the input fields, I also have maxlength in the html.
However, I was hoping someone could shed some light on the situation and inform me on how I can add some type of minlength to the jquery code below so I don't require to do any additional functions?
$('#form1').submit(function (e) {
e.preventDefault();
}).validate({
rules: {
txtusername: {
required: true
},
txtfirstname: {
required: true
},
txtemail: {
required: true
},
txtpassword: {
required: true
},
passwordconfirm: {
required: true
}
},
messages: {
txtusername: {
required: "Please enter your Username."
},
txtfirstname: {
required: "Please enter your First Name."
},
txtemail: {
required: "Please enter your Email."
},
txtpassword: {
required: "Please enter your Password."
},
passwordconfirm: {
required: "Please enter your password again."
}
},
errorPlacement: function (error, element) {
error.appendTo(element.parent().prev());
},
submitHandler: function (form, user) {
CheckUser(form);
return false;
}
});
Example HTML -
<div data-role="fieldcontainer">
<label for="txtusername" data-theme="d">Username:</label>
<input type="text" id="txtusername" name="txtusername" maxlength="12" placeholder="Enter Username"/>
</div>
You can use like below:
rules:{
txtusername: {
required: true,
minlength: 3
},
}
I have a form that is using jquery validation and it works great except for this one issue. To reproduce the issue, fill in all fields in the form, and then choose fields randomly and removed the input. Continue doing so until an error message does not appear at the top, thats the problem.
I'm not sure why it doesn't validate the fields when the input is removed. If anyone can show me why it's doing this, that would be great. I can't reproduce it on any of the Demos on the jquery validate website so I think it has something to do with the way I have mine set up.
JSFIDDLE
$.validator.addMethod("notEqual", function(value, element, param) {
return this.optional(element) || value != param;
});
$("#wizardForm").validate({
rules: {
firstname: {
required:{
depends:function(){
$(this).val($.trim($(this).val()));
return true;
}
},
pattern: /^[a-zA-Z]+([\s]+)?['-]?([a-zA-Z]+)?$/
},
lastname: {
required: {
depends:function(){
$(this).val($.trim($(this).val()));
return true;
}
},
pattern: /^[a-zA-Z]+([\s]+)?['-]?([a-zA-Z]+)?$/
},
email: {
required: {
depends:function(){
$(this).val($.trim($(this).val()));
return true;
}
},
email: true,
notEqual: "demo#somewhere.com",
pattern: /^(.)+(#)(.)+[.](.)+$/
},
password: {
required: true,
equalTo: {
param: "#PWconfirm",
depends: function(element) {
return $("#wizardForm #PWconfirm").val();
}
}
},
PWconfirm: {
required: true
},
company: {
required: true
},
zip: {
required: true
},
country: "required"
},
errorLabelContainer: ".validation-error-msg",
wrapper: "li",
errorClass: "validation-error",
messages: {
firstname: {
required: "The 'First Name' field cannot be empty.",
pattern: "The 'First Name' field must not contain numbers or special characters."
},
lastname: {
required: "The 'Last Name' field cannot be empty.",
pattern: "The 'Last Name' field must not contain numbers or special characters."
},
email: {
required: "The 'Email Address' field cannot be empty.",
email: "The 'Email Address' must be in a valid email format.",
notEqual: "This email address is reserved, please use another.",
pattern: "The 'Email Address' must be in a valid email format."
},
password: {
required: "The 'Password' field cannot be empty.",
equalTo: "Password fields do not match!"
},
company: "The 'Company Name' field cannot be empty.",
zip: "The 'Zip Code' field cannot be empty.",
PWconfirm: "The 'Retype Password' field cannot be empty.",
country: "The 'Country' field needs a valid selection."
}
});
Thanks in advance for any advice.
Quote OP's Comment:
I should note I am never clicking the submit button. Fill in all the fields and then take out some random fields.
It's called "lazy validation". It's how the plugin was designed to work. Basically, errors for empty fields are ignored until the submit button is clicked the first time.
See documentation:
Before a field is marked as invalid, the validation is lazy: Before submitting the form for the first time, the user can tab through fields without getting annoying messages – they won't get bugged before having the chance to actually enter a correct value
I want to validate my form using validate.js and match the password. I wrote the following code:
$(document).ready(function () {
$("#signup-form").validate({
rules: {
"signup-username": {
required: true,
minlength: 2
},
"signup-firstname": {
required: true,
minlength: 2
},
"signup-lastname": {
required: true,
minlength: 2
},
"signup-email": {
required: true
},
"signup-password1": {
required: true,
minlength: 5
},
"signup-password2": {
equalTo: "#signup-password1"
}
},
messages: {
"signup-username": {
required: "Please, enter a user name",
minlength: "Minimum userlength should be 2"
},
"signup-firstname": {
required: "Please, enter your first name",
minlength: "Minimum firstname length should be 2"
},
"signup-lastname": {
required: "Please, enter your last name",
minlength: "Minimum lastname length should be 2"
},
"signup-email": {
required: "Please, enter a valid email"
},
"signup-password1": {
required: "Please, enter your password",
minlength: "Minimum password length should be 5"
},
"signup-password1":"Password doesn't match."
}
submitHandler: function (form)
{
alert("form is submitted successfully.");
}
});
});
I am new to js. Why is it not working. Sometimes I wonder where to put comma and where not. Please help me.
Try change:
"signup-password2": {
equalTo: "#signup-password2"
}
...
"signup-password1":"Password doesn't match."
to:
"signup-password2": {
required: true,
equalTo: "#signup-password1"
}
...
"signup-password2": {
required: "Please, enter your password again",
equalTo: "Password doesn't match."
}
Doc
jsfiddle- validate plugin is broken
another fiddle - works correct
not familiar at all with this library, but I think you mean to check whether signup-password2 is equal to signup-password1. So it should read like:
"signup-password2": {
equalTo: "#signup-password1"
}
I need help modifying this script to add a success message that would show in a div on the page. If there is a way to hide the submit button as well after the form is submitted, that would be helpful in preventing folks from spamming the submit button over and over again.
$().ready(function() {
// validate board form choices and submit
$("#custom_board_form").validate({
rules: {
firstname: {
required: true,
minlength: 2
},
lastname: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
},
messages: {
firstname: {
required: "Please enter a name",
minlength: "Your name must consist of at least 2 characters"
},
lastname: {
required: "Please enter a name",
minlength: "Your name must consist of at least 2 characters"
},
email: "Please enter a valid email address",
},
});
});
You seem to be using jQuery Validation plugin. Add this to your configuration object:
validate({
rules: ...
messages: ...
submitHandler: function(form) {
$('#submitButton').prop('disabled', true);
$('#successMessage').text('Success message!');
form.submit();
}
});
(replacing your own elements for the submit button ID and the ID of an empty element that will receive the success message).
EDIT: Oops, wrong hook.