Bootstrap Form Validation - Show/Hide Fields Issue

I’m using validator.js v0.10.2 by Cina Saffary with very good luck, but I’ve run into a problem.
I’ve got a few forms that show/hide fields based on previous choices.

For example, something like:
How Many Companions Are Traveling With You?
Check “1”, separate name, address, and email fields for that companion will display.
Check “More Than One”, they get a single text area prompting for everybody’s name and info.

So the problem is, ONLY the showing field(s) need to be required, not the hidden one(s), otherwise you can never submit the form because you never see the field that the validation wants you to fill in.

How can I get it to ignore fields that are hidden using the show/hide code below? Ideas?

A typical form field looks like (this one isn’t from the example):

<label class="desc" for="prim_email"> Email </label>
<input id="prim_email" name="prim_email" type="email" class="form-control" value="<?php echo $tE['prim_email']; ?>" required data-error="Invalid Email Address" />
<div class="help-block with-errors"></div>

Show/Hide code looks like:

  var radio_value = $(this).val();
  if(radio_value=='1') {
  else if(radio_value!='1') {

Not really my area but how about removing the ‘required’ attribute from the hidden inputs by default and adding it back in when you show them (and remove when hiding)? You may have to re-initialise the validator plugin again when you show them.

Upgrade from version 0.10.2 to the latest version 0.10.5 - they have since fixed the hidden fields problem and now automatically skip hidden fields when they are hidden.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.