javascript - 使用选择框进行 jquery 表单验证

Question

我正在使用这个插件formValidation我的问题是，如果我在选择框中选择值 3，我只想触发必填字段(年龄、姓名、年份)，这 3 个字段将是必需的。如何在表单验证中执行此操作？

      <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方法来启用和禁用字段的验证器。

首先，您必须使用设置为 false 的选项 enabled 来禁用字段的所有验证器，然后当您选择选择框的值 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/

引用文献:

• 已启用选项的文档:http://formvalidation.io/settings/#field-enabled
• enableFieldValidators方法的文档:http://formvalidation.io/api/#enable-field-validators