使用selectbox的jQuery formvalidation

Question

我正在使用這個插件formValidation我的問題是，如果我在selectbox中選擇值3，則只想觸發必填字段（年齡，姓名，年），這3個字段將是必填字段。如何在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> 

這是我的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'
                          }
                      }
                  }



              }
          });

先感謝您。

Answer 1

您可以使用enableFieldValidators方法啟用和禁用字段的驗證器。

首先，您必須使用enabled選項設置為false來禁用字段的所有驗證器，然后在選擇框的值3時啟用它們。

請參閱以下代碼：

$(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);
    }
});

工作示例：

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

參考文獻：

• enabled選項的文檔： http : //formvalidation.io/settings/#field-enabled
• enableFieldValidators方法的文檔： http : enableFieldValidators