jQuery.validate and hidden input

Question

I have a form with a pseudo-select element. The pseudo-select element is a dropdown menu. When one of the dropdown items is clicked, a hidden input is given a value assigned to that item. I'm using jQuery.validate to validate the form. A simple validation rule is bound to the hidden input. If the input has no value, the hidden input and the pseudo-select are given an error class and an error message shows. My problem is that changing the value of a hidden input does not trigger change, keyup, or blur events. If the error state is applied to the hidden input, that state remains after the input is given a valid value. Only when the form is again submitted is the input correctly validated. Since jQuery.validate enables validation on hidden inputs, I'm wondering if there's a configuration or method that handles this issue. EDIT: ``` $form.validate({ ignore: false, rules: { 'firstname': 'required', 'lastname': 'required', 'org': 'required', 'role': 'required', 'email': { required: true, em…

Accepted Answer

Using the jQuery Validation plugin, these are the standard events that will trigger validation on a particular element (the last one is a bit different)...

- typing in a box

- selecting from a list

- clicking a checkbox or radio button

- losing focus of the input element

- clicking the submit button (entire form is validated)

Since none of those things are triggered when a hidden element changes value, you'll need to trigger it yourself by using the `.valid()` method to validate the element.

You've shown us no code whatsoever, let alone the code that changes the value of the hidden element, so I can only give you something generic. You could place the `.valid()` code within whatever function you use to change the value...

- change the value of the hidden element

call `.valid()` to validate the hidden element

```
$(document).ready(function() {

$('#myform').validate({  // initialize plugin
        // your options
    });

$('#some_button').on('click', function() {
        // some imaginary button that changes the hidden value
        $('input[name="myHiddenElement"]').val('newvalue');  // <- change the hidden value
        $('input[name="myHiddenElement"]').valid();  // <- triggers validation on the hidden element
    });

});
```

You will likely need to use other plugin options like the `errorPlacement` option to properly place the error message `label` within your layout, otherwise it will float someplace after the hidden element.

jQuery.validate and hidden input

Solution

Problem

Related problems