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

Question

Hi all!

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

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!