jQuery validate custom rule in data attributes

Lorenzo picture Lorenzo · Oct 10, 2015 · Viewed 21.7k times · Source

I have an input text which already has some validate rules

<input type="text" value="" placeholder="Write the code here" 
       name="myCode" id="myCode" data-rule-required="true" 
       data-msg-required="Required field" class="form-control" 
       aria-required="true">

and have created a custom rule to validate the syntax of the code

$("#myCode").rules("add", { checkCode: 
    function () { 
        return $('input[name=codeText]').val(); 
    } 
});

With this method I am defining that myCode should be validated by using also checkCode method which in turns receive in input the value of codeText.

This works really very well. However to maintain clean the code I would like to move the rule definition inside a data-* attribute but I can't understand how to write the code to dynamically pass the equivalent of return $('input[name=codeText]').val(). Please have a look at the question marks below.

<input type="text" value="" placeholder="Write the code here" 
       name="myCode" id="myCode" 
       data-rule-required="true" data-msg-required="Required field" 
       data-rule-checkCode="????" data-msg-checkCode="Invalid code" 
       class="form-control" aria-required="true">

What I have to put in the attribute value???

EDIT

As per Sparky answer I've ended up on putting all the selector on the attribute. Like this:

<input type="text" value="" placeholder="Write the code here" 
   [...]
   data-rule-checkCode="input[name=codeText]" 
   [...]>

and using it like this in my method

$.validator.addMethod("checkCode", function(value, element, param) {
    return $(param).val();
}, '...');

Answer

Sparky picture Sparky · Oct 10, 2015

and have created a custom rule to validate the syntax of the code

$("#myCode").rules("add", { checkCode: 
    function () { 
        return $('input[name=codeText]').val(); 
    } 
});

The .rules() method is not how you create a custom rule. It's only how you declare existing rules on a particular input.

The. .addMethod() method is how you create a custom rule.

jQuery.validator.addMethod("checkCode", function(value, element) {
    return $('input[name=codeText]').val();
}, 'Please enter a valid email address.');

Then you can use .rules('add') to assign it to your field...

$('input[name="myCode"]').rules('add', {
    checkCode: true
});

See: http://jqueryvalidation.org/jQuery.validator.addMethod/


Alternatively, you can make the method generic by passing the name as a parameter...

jQuery.validator.addMethod("checkCode", function(value, element, param) {
    return $('input[name=' + param + ']').val();
}, 'Please enter a valid email address.');

Then assign it to your field...

$('input[name="myCode"]').rules('add', {
    checkCode: "codeText"
});

As far as using the data attributes, it's unclear why you need to do this when you're dynamically using the .rules() method.

Maybe after you properly create the checkCode rule, you can simply declare it using data-rule-checkCode="true" or data-rule-checkCode="codeText".