How to get jQuery validate success function to operate on a hidden input field?

Question

I have a form being validated by jQuery.validate. Using errorPlacement option I have a custom set of functions for real-time error validation. Using success option I have a custom set of functions to get rid of and replace error messages.

All works great except my validation on hidden fields only works on submit. With the success option the jQuery.validate is performing perfectly for all other fields except for my hidden fields. I'm using hidden fields to consolidate values from multiple text boxes and check boxes. Here's an example on my dilemma with three birthdate fields: day, month, year:

The HTML:

<label for="birthmonth">Birthdate</label></div>
<div class="birthfield1"><input type="text" id="birthmonth" name="birthmonth" class="ignore" /></div>
<div class="birthfield23"><input type="text" id="birthday" name="birthday" class="ignore" /></div>
<div class="birthfield23"><input type="text" id="birthyear" name="birthyear" class="ignore" /></div>
<div class="errorparent"><input id="birthdate"  name="birthdate" type="hidden" /><div class="norederrorx errordetails2">&nbsp;</div></div>

The jQuery/javascript to update the hidden birthdate field:

    $('#birthday,#birthmonth,#birthyear').change(function() {
    var inputbirthday = $('#birthday').val();
    var inputbirthmonth = $('#birthmonth').val();
    var inputbirthyear = $('#birthyear').val();

    if (inputbirthday && inputbirthmonth && inputbirthyear) {
        alert('all values');
        $('#birthdate').val($('#birthday').val()+'/'+ $('#birthmonth').val()+'/'+ $('#birthyear').val());
    }
    if (inputbirthday == "" || inputbirthmonth == "" || inputbirthyear == ""){
        $('#birthdate').val('');
    }
});

And the jQuery.validate success option code (which works:

success: function() {
  if (elementholder.hasClass('ignore') == false) {
  errorspotholder.find('.rederrorx').removeClass('rederrorx').addClass('norederrorx');
                    }
                },

Answer 1

My use case is a bit different in that I don't use a custom handler for success. However, I was having an issue where the error wouldn't disappear after the hidden field was changed. What I'm saying is that I'm using the default error and success functionality, but there shouldn't be any difference -- your handler should still get run.

It seems the easiest way to handle this is to call the .form() method. So, within the event that fills (or empties) the hidden input, I simply have this:

input.parents('form').validate().form();

input being the $()-ized element from the event, then I traverse upward to get the form (which the validator was attached to), then the validator, then call .form(). This retests the form, clears/adds errors where applicable, but doesn't submit.

Hope that helps, James

Answer 2

Okay...no answer on this one...

But I'm pretty sure it's a missing feature of jQuery.validate (that changes in hidden fields don't fire success and errorPlacement events). I got around it by replicating the code under success and errorPlacement inside of jQuery change events, like so:

$('#chboxterms').change(function() {
   if ($('#chboxterms').is(':checked')) {
       //replicate jQuery.validate "success" code here
   } else {
       //replicate jQuery.validate "errorPlacement" code here
   }
}

If you are using dynamic events and error messages, which you probably are...you'll have to replace that code with the static alternative that relates to the $('selector') that you're coding for.

Hope that helps someone!