We Keep Coding

using multiples addMethod jquery

I want to customize the validations of my form using the addMethod function with the jQuery validator, but when I tried to add more than one method the validator seems to look only at the first one.
Here is the code:
jQuery.validator.addMethod("name", function(value, element) {
return this.optional(element) || /^[A-Za-zÀ-ÖØ-öø-ÿ]{2,30}$/.test(value);
}, "please enter a valid name");
jQuery.validator.addMethod("surname", function(value, element) {
return this.optional(element) || /^[A-Za-zÀ-ÖØ-öø-ÿ]{1,30}\-?[A-Za-zÀ-ÖØ-öø-ÿ]{1,30}$/.test(value);
}, "please enter a valid surname");
$("#contactform").validate({
rules: {
firstname:{
required: true,
name: true,
minlength: 2,
maxlength: 30
},
lastname:{
required: true,
surname: true,
minlength: 2,
maxlength: 30
}
}
});
The issue is that on the last name I want to be able to add an '-' in case of a combined surname, I tried the regEx and it works exactly as I want to, but even if I call the method 'surname' in the rules of the field, it seems to elaborate the method 'name' anyway!
Thanks in advance for your help, I really don't understand what I'm missing here..
https://jsfiddle.net/2zumkcyg/11/

The issue is with your method name. The prop name inside rules is already a predefined rule inside $.validator like minLength. If you change name to anything but that it will work.
JS
$(document).ready(function(){
$.validator.addMethod("named", function(value, element){
return this.optional(element) || /^[A-Za-zÀ-ÖØ-öø-ÿ]{2,30}$/.test(value);
}, "Please enter a valid name.");
$.validator.addMethod("surname", function(value, element){
return this.optional(element) || /^[A-Za-zÀ-ÖØ-öø-ÿ]{1,30}\-?[A-Za-zÀ-ÖØ-öø-ÿ]{1,30}$/.test(value);
}, "Please enter a valid surname.");
$("#contactform").validate({
rules: {
firstname: {
required: true,
named: true,
minlength: 2,
maxlength: 30
},
lastname:{
required: true,
surname: true,
minlength: 2,
maxlength: 30
}
}
});
});
DEMO

Jquery Validation doesn't validate when input is removed

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

Need help modifying a form JS script to add a success message

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.

jquery validation not firing

My form is using jquery validation. However, the validation is not firing. I am sure it is just a tiny mistake somewhere.. anyone?
Here is fiddle link http://jsfiddle.net/2L6xT/
BAsically here is my jquery validation code
$(document).ready(function () {
<!-- validation -->
$('#submitDetails').validate({
// 1. validation rules.
rules: {
firstName: {
required: true,
maxlength: 120
},
lastName:{
required: true,
maxlength: 120
},
custom1: {
required: true,
maxlength: 120
},
state: {
required: true
},
custom9: {
required: true
},
email: {
required: true,
email: true
}
},
// 2. Validation fail messages
messages: {
custom9: {
required: "You must agree to the terms of conditions in order to participate."
}
},
errorPlacement: function(error, element) {
if (element.attr("name") == "custom9" )
error.appendTo("#error_msg");
else
error.insertAfter(element);
}
});
///execute when submit button is clicked
$("#submit").click(function () {
});
});

In your html, the input element doesnot have name, the validator framework uses name to apply the rules
<input type="text" class="form-control" id="firstName" name="firstName" placeholder="First name" />
so along with id add name also(id is not required if it is not used elsewhere)
Demo: Fiddle

JQuery validation plugin maxlength?

I am using JQuery validation plugin. I want to specify maxlength for one of the fields.It can be specified as below.
rules: {
Message: {
required: false,
maxLength: 200
}
}
But instead of defining the rules externally, i want to specify the rules inside html input code
Similar to :
<input type="text" name="AssistanPhone" value="" class="required" />
In above example "required" is specified through class. Similarly how can i specifiy maxlength which can be recognized by jquery plugin and gives error message if length exceeds?
Thanks!

Not capital L its l
Ex:
$( "#myform" ).validate({
rules: {
field: {
required: true,
maxlength: 200
}
}
});
PLUGIN DEMO

As far as I can see you cannot specify the messages via attributes, but the maxlength can be specified as a attribute
<input type="text" name="AssistanPhone" value="" required maxlength="3" />
Demo: Fiddle

I updated the javascript code of the validator myself (so I'm stuck with my version 1.8.1 now instead of upgrading), but here's what I did (around line 767):
classRules: function(element) {
var rules = {};
var classes = $(element).attr('class');
classes && $.each(classes.split(' '), function() {
if (this in $.validator.classRuleSettings) {
$.extend(rules, $.validator.classRuleSettings[this]);
}
if (this.toLowerCase().lastIndexOf('maxlength-', 0) === 0) { // starts with
var x = parseInt(this.substring(10)); // take number after 'maxlength-'
$.extend(rules, {maxlength: x});
}
});
return rules;
},
I added the extra if-test for "maxlength-", so now I can add a class like "maxlength-10" to limit to 10. Of course I could also add minlength and so on.

$("#FormID").validate({
rules: {
PriorityDDL: {
required: true
},
Title: {
required: true
},
Text: {
required: true,
maxlength: 300
},
date: {
required: true
},
reportfile: {
required: true
}
},
messages: {
PriorityDDL: {
required: "Please select priority"
},
Title: {
required: "Please enter title"
},
Text: {
required: "Please enter message",
maxlength:"maxLength is 300 characters"
},
date: {
required: "Please select date"
},
reportfile: {
required: "Please select file"
}
}
});