jQuery validate custom rule in data attributes
Asked Answered
K

1

7

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();
}, '...');
Kitchen answered 10/10, 2015 at 15:24 Comment(0)
S
9

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".

Staple answered 10/10, 2015 at 19:17 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.