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

James S · Accepted Answer · 2011-04-27 18:38:02Z

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

answered Apr 27, 2011 at 18:38

James S

3,38425 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kyle Cureau · Accepted Answer · 2010-07-21 18:15:08Z

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!

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related