JavaScript Bootstrap验证

时间:2014-11-05 21:44:28

标签: javascript jquery twitter-bootstrap jqbootstrapvalidation

我在表单中使用JavaScript和Bootstrap进行验证。当我需要所有这四个字段时,一切都按照它应该的方式工作。

但是,我需要一个或两个情况。例如,如果前两个字段是“' name'和' SIN'填写,然后' BusinessName'和' BusinessID'不是必需的,反之亦然。这是当前的代码:

<div class="form-group">
    <label class="col-lg-3 control-label">Name</label>
    <div class="col-lg-5">
        <input type="text" required class="form-control" name="name" />
    </div>
</div>

<div class="form-group">
    <label class="col-lg-3 control-label">SIN #</label>
    <div class="col-lg-5">
        <input type="text" class="form-control" name="SIN" />
    </div>
</div>

<div class="form-group">
    <label class="col-lg-3 control-label">Business Name</label>
    <div class="col-lg-5">
        <input type="text" class="form-control" name="BusinessName" />
    </div>
</div>

<div class="form-group">
    <label class="col-lg-3 control-label">Business #</label>
    <div class="col-lg-5">
        <input type="text" class="form-control" name="Businessid" />
    </div>
</div>  

<script type="text/javascript">
$(document).ready(function() {
    $('#defaultForm').bootstrapValidator({
        message: 'This value is not valid',

        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            name: {
                validators: {
                    notEmpty: {
                        message: 'The Name is required and cannot be empty'
                    },

                    regexp: {
                        regexp: /^[a-zA-Z-\.\ ]+$/,
                        message: 'The Name can only consist of Alphabets, Space and Hyphens'
                    }
                }
            },


            SIN: {
                validators: {
                    notEmpty: {
                        message: 'The SIN is required and cannot be empty'
                    },

                    regexp: {
                        regexp: /^[0-9\ ]+$/,
                        message: 'The SIN can only consist of Numbers and Space'
                    }
                }
            },


            BusinessName: {
                validators: {
                    notEmpty: {
                        message: 'The Business name is required and cannot be empty'
                    }
                }

            },


            Businessid: {
                validators: {
                    notEmpty: {
                        message: 'The Business# is required and cannot be empty'
                    },

                    regexp: {
                        regexp: /^[0-9]+$/,
                        message: 'The Business# can only consist of Numbers'
                    }
                }
            },
des1: {

}


        }
    }) .on('success.form.bv', function(e) {

        });
});
</script>

2 个答案:

答案 0 :(得分:0)

可能是:

fields: function(){

    if(your evaluator here){

        return name: {etc}

    }
    else{

        return BusinessName: {etc}

    }

}

答案 1 :(得分:0)

这是我的解决方案http://jsfiddle.net/silviagreen/4jcdnn14/

.on(&#39;更改&#39;,&#39; [name =&#34; isPerson&#34;]&#39;,function(){

    var bootstrapValidator = $('#form_signup').data('bootstrapValidator'),
        isPerson = ($(this).val() == 'true');

    if (isPerson) {
        $('.persona').find('.form-control').removeAttr('disabled');
        $('.azienda').find('.form-control').attr('disabled', 'disabled');


        bootstrapValidator.enableFieldValidators('luogo_di_nascita', true)
            .enableFieldValidators('data_di_nascita', true)
            .enableFieldValidators('cf', true)
            .enableFieldValidators('sede', false)
            .enableFieldValidators('ragione_sociale', false);

        bootstrapValidator.revalidateField('luogo_di_nascita')
            .revalidateField('data_di_nascita')
            .revalidateField('cf');

    } else {
        $('.azienda').find('.form-control').removeAttr('disabled');
        $('.persona').find('.form-control').attr('disabled', 'disabled');

        bootstrapValidator.enableFieldValidators('luogo_di_nascita', false)
            .enableFieldValidators('data_di_nascita', false)
            .enableFieldValidators('cf', false)
            .enableFieldValidators('sede', true)
            .enableFieldValidators('ragione_sociale', true);

        bootstrapValidator.revalidateField('sede')
            .revalidateField('ragione_sociale');

    }






    })

根据&#34; isPerson&#34;的值,只验证该字段的一部分。