looselycoupled looselycoupled - 6 months ago 74
jQuery Question

jQuery Validate won't clear server-inserted error messages on KeyUp

We are using the JQuery Validate plugin to do simple field validation. Everything works as expected when using default, client-side validation.

However, some of these fields require server-side validation. The problem occurs when manually creating error labels on the server in the HTML. When doing so, the error label displays as expected, however the behavior is wrong.

Essentially, once the error label is displayed, it won't be removed on the KeyUp event of the field. It will only be removed when you press the submit button, and this first press of the submit button only hides the error label and sets the input field to valid. You have to press the submit button a second time to actually have the form submit. It appears JQuery validate knows about the error label and it's connected input field, else it wouldn't be hidden when pressing the submit button.

Things I've tried:


  • setting
    generated="true"
    on the error label (no change)

  • removing the server-side label generation and returning an error code which then creates the label on the client side with the Validator object, yet the behavior is the same (have to press the submit button first to remove the label and a second time to submit the form):


    var validator = $( "#form ).validate();
    validator.showErrors({
    "password": "invalid password"
    });



Here is an example form with server returned error label (using Thymeleaf):

<div class="form-group">
<label for="password" class="ex-label" th:text="# {common.password}">Password</label>
<input id="password" name="password" type="password" class="form-control ex-input-modal required" />
<label th:if="${passFail}" for="password" class="error"> Wrong password </label>
</div>

Answer

Title: jQuery Validate won't clear server-inserted error messages on KeyUp

It's not designed to do that because it's a client-side script.

The jQuery Validate plugin generates and toggles its own validation error messages on the client via JavaScript. Since you're blocked from submitting the form to the server until jQuery Validate is satisfied, you are not going to see any server generated validation messages in the first place.

When used with client-side validation, the server-side validation messages would never be seen under normal conditions... server-side validation would only there to protect you in case JavaScript is disabled, broken, or bypassed.


EDIT:

If you're trying to evaluate whether an email address, user account, or whatever is already in your system, then you would use the plugin's built-in remote method. This rule will use ajax() to call a server-side script and if your server-side script returns true, the rule passes validation. If your script returns false or a JSON encoded string, then the rule fails validation. If you use false, the default error message is used. If you return a JSON string, like "john smith is already in use", then the plugin will use the string as the error message.

See: jqueryvalidation.org/remote-method/