使用selectbox的jQuery formvalidation

Question

I am using this plugin formValidation my problem is that I want only to trigger the required fields (age,name,yeare) if I choose the value 3 in selectbox this 3 fields will be required.How to do that in formvalidation ?

      <form name="myform">


                     <div class='form-group'>
                         <label>Type</label>
                         <div>
                             <select class='form-control' name='type' id='type'>
                                   <option value ='1'> 1 </option>
                                   <option value ='2'> 2 </option>
                                   <option value ='3'> 3</option>
                                   <option value ='4'> 4 </option>
                             </select>
                         </div>
                     </div>



                     <div class="form-group">
                         <label for="age">age</label>
                         <input type="text" class="form-control" id="age" name="age">
                     </div>

                     <div class="form-group">
                         <label for="name">name</label>
                         <input type="text" class="form-control" id="name" name="name">
                     </div>

                     <div class="form-group">
                         <label for="year">age</label>
                         <input type="text" class="form-control" id="year" name="year">
                     </div>

        </form> 

here is my js

             $('#myform').formValidation({
              framework: 'bootstrap',
              icon: {
                  valid: 'glyphicon glyphicon-ok',
                  invalid: 'glyphicon glyphicon-remove',
                  validating: 'glyphicon glyphicon-refresh'
              },
              fields: {

                  year: {
                      validators: {
                          notEmpty: {
                              message: 'The year is required'
                          }
                      }
                  },
                  name: {
                      validators: {
                          notEmpty: {
                              message: 'The name is required'
                          }
                      }
                  },
                  age: {
                      validators: {
                          notEmpty: {
                              message: 'The age is required'
                          }
                      }
                  }



              }
          });

Thank you in advance.

Answer 1

You can use the enableFieldValidators method to enable & disable the validators of your fields.

First, you have to disable all validators of your fields using the option enabled set to false , and then when you select the value 3 of your selectbox, enable them.

See following code:

$(document).ready(function () {
    $('#myform').formValidation({
        framework: 'bootstrap',
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            year: {
                // Disable the validators of the field 'year'
                enabled: false, // <==
                validators: {
                    notEmpty: {
                        message: 'The year is required'
                    }
                }
            },
            name: {
                // Disable the validators of the field 'name'
                enabled: false, // <==
                validators: {
                    notEmpty: {
                        message: 'The name is required'
                    }
                }
            },
            age: {
                // Disable the validators of the field 'age'
                enabled: false, // <==
                validators: {
                    notEmpty: {
                        message: 'The age is required'
                    }
                }
            }
        }
    });
});

$('#type').on('change', function (e) {
    if (parseInt($('#type').val(), 10) === 3) {
        // Enable the validators of your fields
        // 'age', 'name' & 'year'
        $('#myform').data('formValidation').enableFieldValidators('age', true);
        $('#myform').data('formValidation').enableFieldValidators('name', true);
        $('#myform').data('formValidation').enableFieldValidators('year', true);
    } else {
        // Disable them again
        $('#myform').data('formValidation').enableFieldValidators('age', false);
        $('#myform').data('formValidation').enableFieldValidators('name', false);
        $('#myform').data('formValidation').enableFieldValidators('year', false);
    }
});

Working example:

• http://jsfiddle.net/Arkni/ncbybr1b/

References:

• enabled option's docs: http://formvalidation.io/settings/#field-enabled
• enableFieldValidators method's docs: http://formvalidation.io/api/#enable-field-validators