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

    }
});

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

    }
});

• javascript
• jquery
• jquery-validate

• 1 You'd have better to post all relevant code in question – A. Wolff Commented Dec 1, 2014 at 15:39
• 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 Commented Dec 2, 2014 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 Commented Dec 2, 2014 at 23:38

1 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.