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();
}, '...');
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"
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With