0

I have a wizard form that has a field that is marked 'hidden' until I determine whether or not it is to be shown. When getting to the wizard step, the field is hidden. If I click 'Next', the field is validating instead of being ignored.

<div class="row">
    <div class="col-md-6">
        <div class="form-group" id="alcohol_allowed" style="visibility: hidden">
           <label class="col-form-label require">Will There be Alcohol Served?:</label>
           <div class="custom-controls">
               <label class="custom-control custom-radio">
               <input type="radio" class="custom-control-input" name="grpAlcohol" id="rdoAlcoholNo" style="visibility: hidden"/>
               <span class="custom-control-indicator"></span>
               <span class="custom-control-description">No</span>
               </label>
               <label class="custom-control custom-radio">
               <input type="radio" class="custom-control-input" name="grpAlcohol" id="rdoAlcoholYes" style="visibility: hidden"/>
               <span class="custom-control-indicator"></span>
               <span class="custom-control-description">Yes</span>
               </label>
           </div>
       </div>
 </div>

 <div class="col-md-6">
      <div class="form-group" id="resident_non" style="visibility: hidden">
           <label class="col-form-label require">Resident or Non-Resident?:</label>
           <div class="custom-controls">
                <label class="custom-control custom-radio">
                <input type="radio" class="custom-control-input" name="grpResidency" id="rdoResident" style="visibility: hidden" />
                <span class="custom-control-indicator"></span>
                <span class="custom-control-description">Resident</span>
                </label>
                <label class="custom-control custom-radio">
                <input type="radio" class="custom-control-input" name="grpResidency" id="rdoNonresident" style="visibility: hidden" />
                <span class="custom-control-indicator"></span>
                <span class="custom-control-description">Non-Resident</span>
                </label>
             </div>
        </div>
    </div>
</div>

I have searched and tried any combination I can think of, but it is still validating. I use formvalidation.io:

$('#frmFacilityReservation')
                .formValidation({
                    framework: 'bootstrap',
                    excluded: [':disabled', ':hidden', ':not(:visible)'],
                    icon: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },

                    fields: {
                        cmbFacilityName: {
                            validators: {
                                notEmpty: {
                                    message: 'Please choose the facility you wish to reserve.'
                                },
                                blank: {},
                            }
                        },
                        dteReservationDateStart: {
                            validators: {
                                notEmpty: {
                                    message: 'Please enter your reservation start date and time.'
                                },
                                checkMinimumDaysInAdvance: {},
                                checkMaximumDaysInAdvance: {},
                                checkAvailableDaysTimes: {},
                            }
                        },
                        dteReservationDateEnd: {
                            validators: {
                                verbose: false,
                                notEmpty: {
                                    message: 'Please enter your reservation end date and time.'
                                },
                                checkHourDifference: {},
                            }
                        },
                        txtPurposeOfUse: {
                            validators: {
                                notEmpty: {
                                    message: 'Enter the reason for the reservation.'
                                },
                            }
                        },
                        'grpAlcohol': {
                            validators: {
                                notEmpty: {
                                    message: 'Please choose whether or not alcohol is going to be present'
                                }
                            },
                        },
                        'grpResidency': {
                            validators: {
                                notEmpty: {
                                    message: 'Please choose whether you are resident or non-resident.'
                                }
                            },
                        },

                    },
                })
Suneel Kumar
  • 1,650
  • 2
  • 21
  • 31
Susan
  • 13
  • 1
  • 7
  • Does [this](https://stackoverflow.com/questions/20287567/ignore-all-hidden-div-but-not-one-in-jquery-validation/20287614#20287614) help? – Grizzly Feb 06 '18 at 15:17
  • No. Tried to add the following but it does not work either. The field 'Will there be alcohol' is still being validated, even though it is hidden. .formValidation({ framework: 'bootstrap', ignore: [':disabled', ':hidden', ':not(:visible)'], excluded: [':disabled', ':hidden', ':not(:visible)'], – Susan Feb 06 '18 at 16:05
  • I was able to get it working by using 'disabled' instead of the 'visibility'. – Susan Feb 06 '18 at 18:58

0 Answers0