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