CODEWITHSUNDEEP
jqueryjquery-validate
vellai durai
vellai durai

Reputation: 1011

how to remove validation on success for hidden fields using jquery validator

I need to hide the validation error on success in hidden field , 

<form id="some-id">
    <input name="from" class="form-control" id="from type="text">
    <input type="hidden" class="id-from" name="idfrom">
</form>

$('#some-id).validate({    
    ignore: "",
    rules: {
        idfrom: "required",
    },
});

On change of input class the hidden value will set, so I need the hidden field as required. It works fine but the error message is not hiding on success and moving to next field. It's hiding only when submitting the form. I have tried this:

unhighlight: function (element) {
    $(element).removeClass('error')
}

However it removes only for the focused field, not hidden fields.

Upvotes: 1

Views: 1385

Answers (1)

Sparky
Sparky

Reputation: 98738

You have not explained the purpose of this hidden field or why it needs to be validated. If it automatically updates itself based on a text field, why not simply validate the original text field instead?

Why it happens:

By default, the validation test is triggered by blur & keyup events on the input elements, and on the click event of the submit button. Since you have an invisible hidden element that the user cannot see or interact with, there are no blur or keyup events on it. This leaves only the click of the submit that can trigger a validation test on this element.

How to fix it:

You'll need to write an event handler that captures the blur and keyup events of the text input element, and programmatically trigger a validation test using the .valid() method on the hidden element.

$('[name="from"]').on('keyup blur', function() {
    $('[name="idfrom"]').valid();  // force validation test
});

Upvotes: 1

Related Questions