Clash Royale CLAN TAG

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/

2 Answers
2

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.

name

$.validator

minLength

name

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

addMethod

name

The name method seems to be used by default... Possibly because the field name contains "name", I don't know. So you have to disable it: name: false.

name

name: false

Then... You inversed your regex conditions my friend. Probably while debugging.
That's it!

See how I used console logs to debug it.

console.clear();

jQuery.validator.addMethod("name", function(value, element) {
console.log("nname method used on "+element.value);

var condition = /^[A-Za-zÀ-ÖØ-öø-ÿ]{1,30}-?[A-Za-zÀ-ÖØ-öø-ÿ]{1,30}$/.test(value);
console.log("condition with dash : "+condition);

var condition = /^[A-Za-zÀ-ÖØ-öø-ÿ]{2,30}$/.test(value); // This is a condition for surname.
console.log("condition without dash : "+condition);

return this.optional(element) || /^[A-Za-zÀ-ÖØ-öø-ÿ]{1,30}-?[A-Za-zÀ-ÖØ-öø-ÿ]{1,30}$/.test(value);
}, "please enter a valid name");

jQuery.validator.addMethod("surname", function(value, element) {
console.log("nsurname method used on "+element.value);

var condition = /^[A-Za-zÀ-ÖØ-öø-ÿ]{2,30}$/.test(value);
console.log("condition without dash : "+condition);

return this.optional(element) || /^[A-Za-zÀ-ÖØ-öø-ÿ]{2,30}$/.test(value);
}, "please enter a valid surname");


$("#contactform").validate({
rules: {
firstname:{
required: true,
name: true,
minlength: 2,
maxlength: 30
},
lastname:{
required: true,
name:false, // Add this!
surname: true,
minlength: 2,
maxlength: 30
}
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>

<form id="contactform">
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname"><br>
<button>submit</button>
</form>


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.