本文介绍了Bootstrap表单验证验证同一表单组内的所有字段的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我的html是:

 

邮政编码输入突出显示红色,因为它位于< div class =form- group required> 其中 address_state 和 address_city 在相同的 div 设置了验证规则,如果其中任何一个无效,错误类 .has-error .form-control 触发并突出显示邮政编码输入。



示例其中邮政编码输入突出显示为红色,但未设置验证规则。



解决方案:设置自定义e rror 选择器例如 row:'.col-xs-12',在验证规则中,所以它会覆盖默认错误class .has-error .form-control 并且只针对内部输入< div class =form-group required> ,它有验证规则集并且有错误。





使用自定义选择器的示例

< link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css />< link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css>< link rel = stylesheethref =https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/css/formValidation.min.css/>< script src =https://ajax.googleapis。 com / ajax / libs / jquery / 2.1.1 / jquery.min.js>< / script>< script src =https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1 /js/formValidation.min.js\"></script><script src =https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/js/framework/bootstrap.min。 js>< / script>< form id =contactFormclass =form-horizo​​ntal> < div class =form-group required> < label for =address1class =col-xs-12 col-sm-2 col-md-2 control-label> Address< / label> < div class =col-xs-12 col-sm-9 col-md-9> < input type =textclass =form-controlname =address1id =address1> < / DIV> < / DIV> < div class =form-group required> < div class =col-xs-12 col-sm-3 col-md-3 col-sm-offset-2 col-md-offset-2> < input type =textclass =form-controlname =address_cityid =AddressCity> < label class =control-label control-label-underfor =address_city>城市< / label> < / DIV> < p class =row clearfix visible-xs-blockform-group required>< / p> < div class =col-xs-12 col-sm-3 col-md-3 contact-state> < input type =textclass =form-controlname =address_stateid =AddressEmirate> < label class =control-label control-label-underfor =address_state&>; Emirate< / label> < / DIV> < p class =row clearfix visible-xs-block>< / p> < div class =col-xs-12 col-sm-3 col-md-3> < input type =textclass =form-controlname =address_zipid =AddressPostal> < label class =control-label control-label-under>< / label> < / DIV> < / DIV> < div class =form-group> < div class =col-xs-9 col-xs-offset-3> < button type =submitclass =btn btn-primary>提交< / button> < / DIV> < / div>< / form>

必须将小提琴视图展开到左侧,或者在完整页面视图中运行上面的代码片段,它们将完全像快照。


I am facing a problem while validating my form.

My html is :

<div class="form-group required">
    <label for="address1" class="col-xs-12 col-sm-2 col-md-2 control-label">Address</label>
    <div class="col-xs-12 col-sm-9 col-md-9">
        <input type="text" class="form-control" name="address1" id="address1">
        <label for="address1" class="control-label control-label-under">Address 1</label>
    </div>
</div>

<div class="form-group required">
    <div class="col-xs-12 col-sm-3 col-md-3 col-sm-offset-2 col-md-offset-2">
        <input type="text" class="form-control" name="address_city" id="AddressCity">
        <label class="control-label control-label-under" for="AddressCity">City</label>
    </div>
    <p class="row clearfix  visible-xs-block"></p>
    <div class="col-xs-12 col-sm-3 col-md-3 contact-state">
        <input type="text" class="form-control" name="address_state" id="AddressEmirate">
        <label class="control-label control-label-under" for="AddressEmirate">Emirate</label>
    </div>
    <p class="row clearfix  visible-xs-block"></p>
    <div class="col-xs-12 col-sm-3 col-md-3">
        <input type="text" class="form-control" name="address_zip" id="AddressPostal">
        <label class="control-label control-label-under" for="AddressPostal"></label>
    </div>
</div>
<hr>

And the output is

Now the problem is as I need to display them inline so I put them inside same from-group and that is creating issue while validation.

I don't have any validation for postal code. But while validating if any of city/emirate validation fails then postal code also shown in red color. Which I don't want.

My question is how to display them inline as shown in the image but also keep them in separate form-group so that validation does not affect.

解决方案

It's not difficult, can be achieved with the same HTML structure

Reason: postal code input highlighted red where it's not required and no validation rule set, because it's inside <div class="form-group required"> where address_state and address_city are inside same div have validation rules set so if any of them invalid, error class .has-error .form-control triggered and highlight the postal code input too.

Fiddle example where postal code input highlighted red but no validation rule set to it.

Solution: set custom error selector e.g row: '.col-xs-12', inside validation rules so it will override the default error class .has-error .form-control and only target the input inside <div class="form-group required"> which has validation rule set and has error.

More Information

Plugin Example

Fiddle example with custom selector

$(document).ready(function () {
    $('#contactForm')
        .formValidation({
        framework: 'bootstrap',
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            address_city: {
                row: '.col-xs-12',
                validators: {
                    notEmpty: {
                        message: 'The city is required'
                    }
                }
            },
            address_state: {
                row: '.col-xs-12',
                validators: {
                    notEmpty: {
                        message: 'The State is required'
                    }
                }
            },
            address1: {
                validators: {
                    notEmpty: {
                        message: 'The Address One required'
                    }
                }
            }
        }
    });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/css/formValidation.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/js/formValidation.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/js/framework/bootstrap.min.js"></script>
<form id="contactForm" class="form-horizontal">
    <div class="form-group required">
        <label for="address1" class="col-xs-12 col-sm-2 col-md-2 control-label">Address</label>
        <div class="col-xs-12 col-sm-9 col-md-9">
            <input type="text" class="form-control" name="address1" id="address1">
        </div>
    </div>

    <div class="form-group required">
        <div class="col-xs-12 col-sm-3 col-md-3 col-sm-offset-2 col-md-offset-2">
            <input type="text" class="form-control" name="address_city" id="AddressCity">
            <label class="control-label control-label-under" for="address_city">City</label>
        </div>

        <p class="row clearfix  visible-xs-block" form-group required></p>

        <div class="col-xs-12 col-sm-3 col-md-3 contact-state">
            <input type="text" class="form-control" name="address_state" id="AddressEmirate">
            <label class="control-label control-label-under" for="address_state">Emirate</label>
        </div>

        <p class="row clearfix  visible-xs-block " ></p>

        <div class="col-xs-12 col-sm-3 col-md-3">
            <input type="text" class="form-control" name="address_zip" id="AddressPostal">
            <label class="control-label control-label-under"></label>
        </div>
    </div>
    <div class="form-group">
        <div class="col-xs-9 col-xs-offset-3">
            <button type="submit" class="btn btn-primary">Submit</button>
        </div>
    </div>
</form>

SideNote: You have to expand the fiddle view to left, or run the above snippet in full page view they will be exactly like snapshot in question.

这篇关于Bootstrap表单验证验证同一表单组内的所有字段的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-12 10:21