jquery-validation
jquery-validation copied to clipboard
Erratic behavior when using class-based rules
trafficstars
If I use class-based validation rules like follows:
<form role="form" id="formItem" name="formItem">
{{#with myItem}}
<label>Item Number</label>
<input type="text" class="form-control required digits" id="itemNumber" name="itemNumber" value="{{itemNumber}}">
{{/with}}
...
</form>
And a simple validate() call in onRendered():
Template.itemEdit.onRendered(function () {
$('#formItem').validate();
I get really odd behavior on that input field. I can enter an invalid value and get the validation error label appearing below my field, but even with invalid data displayed (and flagged), the submit handler code:
$('#formItem').valid()
returns true?!
Switching from class-based rules to defining the "rules" in the validate method solves the problem.
Template.itemEdit.onRendered(function () {
$('#formItem').validate({
rules: {
itemNumber: {
required: true,
digits: true
}
}
});
});
A quick fix would be better, but I thought I'd document in case anyone else encounters this.