Bootstrap表单验证验证同一表单组内的所有字段 [英] Bootstrap form validation validates all the fields inside same form group

问题描述

我的html是：

 
 < 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> 
< label for =address1class =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 =textclass =form-controlname =address_cityid =AddressCity> 
< label class =control-label control-label-underfor =AddressCity>城市< / 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 =textclass =form-controlname =address_stateid =AddressEmirate> 
< label class =control-label control-label-underfor =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 =textclass =form-controlname =address_zipid =AddressPostal> 
 < / div> 
< / div> 
< hr> 
  

输出结果是

现在问题在于我需要以内联方式显示它们，所以我将它们放在相同的组内，这就造成了问题验证。

我没有任何邮政编码验证。但在验证城市/酋长国验证是否失败时，邮政编码也会以红色显示。我不想要的。

我的问题是如何在图像中显示它们，并将它们保留在单独的form-group中，以便验证不会影响。

解决方案

这并不困难，可以用相同的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> ，它有验证规则集并且有错误。

更多信息

插件示例

小提琴使用自定义选择器的示例

框架：'bootstrap'，图标：{有效：'glyphicon glyphicon-ok'，i nvalid：'glyphicon glyphicon-remove'，验证：'glyphicon glyphicon-refresh'}，fields：{address_city：{row：'.col-xs-12'，验证者：{notEmpty：{message：'The city is required' }}}，address_state：{row：'.col-xs-12'，校验器：{notEmpty：{message：'State is required'}}}，address1：{validators：{notEmpty：{message：'The Address一个需要'}}}}}）;}）;

< 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表单验证验证同一表单组内的所有字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！