Question

I am dynamically adding validation rules when a ‘save’ button is clicked – I am doing this for a text input and a select element:

$(“#my-txt”).rules(“add”, { required:
true, messages: { required: “text
required”} });

$(“#my-ddl”).rules(“add”, { required:
true, messages: { required: “selection
required”} });

After I add the rules I am manually triggering validation (.valid()) then removing the rules by doing .rules("remove") on the elements. I do this because I want the errors to stay up until the user clicks ‘save’ again and validation is re-triggered.

This works fine and the errors are displayed correctly … BUT … while the error for the text input stays up no matter what, when I click on the drop down list the relevant error goes away (I can see display: none being injected in the span containing the error) independently of any selection (it goes away as soon as I click on the control, not when I tab off). I would expect the error for the drop down not to be hidden, same as the text input field.

The rule seems to be actually gone though, because if I go back and pick the default value on the select element (value=””) it doesn’t show the error message.

This has been puzzling me – I am trying to find a way to get both fields to work the same way.

Any help appreciated!

Answer 1

After looking at the jquery-validate API again, I see there’s no option to keep error shown and the difference in handling the display must be in the plugin code. Good luck fixing it. 🙂

Another way to fix this would be to manually save what jquery-validate add to your DOM, have it removed and re-append it yourself.

Finally, I prefer to see when my input is valid without having to reclick some buttons. Especially in the case of strange, complex password requirements.