jQuery.validate和隐藏的输入

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');
            }
        });

    }
});

Answer 1

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.