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,
            email: true
        }
    },
    messages: {
        'firstname': 'Please enter your first name',
        'lastname': 'Please enter your last name',
        'org': 'Please enter your organization',
        'role': 'Please select your role',
        'email': 'Please enter your email'
    },
    errorPlacement: function(error, element) {
        var $errMessage = $('.js-err-message');

        $errMessage.removeClass('js-hidden'); 

        $(error).each(function(){
            $errMessage.append(error);

            if (element.is('#role-input')) {
                $('.pseudo-select').addClass('mad-error');
            }
        });

    }
});

Sorry, I didn't think the code was strictly relevant. My question is about the capabilities of jQuery.validate in general and not about a problem with my code. — maxhallinan, Dec 02 '14 at 15:06
Relevant code would include _any_ code required to reproduce the issue. In your case, it saves people time when they create a demo for their answer. It also helps future readers better understand the problem/solution if they're having a similar issue. Thanks. — Sparky, Dec 02 '14 at 23:38

Sparky · Accepted Answer · 2016-06-15T20:21:48.353

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.

Thank you for your suggestion to use the valid() method. That will work perfectly. Regarding your implementation, change events do not fire on hidden elements when changing the value with JavaScript: http://stackoverflow.com/questions/12580761/hidden-input-change-event — maxhallinan, Dec 02 '14 at 15:28
@maxhallinan, thanks, I'll edit my answer and look into that. — Sparky, Dec 02 '14 at 15:32

jQuery.validate and hidden input

1 Answers1