使用Bootstrap验证进行条件验证

时间:2014-10-22 14:31:45

标签: javascript jquery twitter-bootstrap jqbootstrapvalidation

我在表单中使用BootstrapValidation,并且只有在填写了另一个字段时才想要进行一些验证。

例如,我有这样的表格:

<form>
  <input type="text" name="name"/>
  <input type="text" name="age"/>
</form>

我想检查只有姓名时是否填写年龄。

有解决方案吗?

1 个答案:

答案 0 :(得分:2)

或许这样的事情:

$(document).ready(function() {
    $('form')
        .bootstrapValidator({
            fields: {
                name: {
                    enabled: false,
                    validators: {
                        notEmpty: {
                            message: 'The name is required and cannot be empty'
                        }
                    }
                },
                age: {
                    enabled: false,
                    validators: {
                        notEmpty: {
                            message: 'Age is required if name is set'
                        }
                    }
                }
            }
        })

        .on('keyup', '[name="name"]', function() {
            var isEmpty = $(this).val() == '';
            $('form')
                    .bootstrapValidator('enableFieldValidators', 'name', !isEmpty)
                    .bootstrapValidator('enableFieldValidators', 'age', !isEmpty);

            // Revalidate the field when user start typing in the name field
            if ($(this).val().length == 1) {
                $('form').bootstrapValidator('validateField', 'name')
                                .bootstrapValidator('validateField', 'age');
            }
        });

});