jquery-validation icon indicating copy to clipboard operation
jquery-validation copied to clipboard

Erratic behavior when using class-based rules

Open cormip opened this issue 9 years ago • 0 comments
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.

cormip avatar Jun 28 '16 22:06 cormip