javascript - 選択ボックスを使用したjquery formvalidation

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、フィールドのバリデーターを有効および無効にすることができます。

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://formvalidation.io/api/#enable-field-validators