Bootstrap 表单验证验证同一表单组内的所有字段

Question

我在验证表单时遇到问题。

我的 html 是：

<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>

输出是

现在的问题是我需要内联显示它们，所以我将它们放在同一个 from-group 中，这会在验证时产生问题。

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

我的问题是如何将它们内联显示，如图所示，同时将它们保存在单独的表单组中，以便验证不会影响。

Answer 1

不难，用同样的HTML结构就可以实现

原因： postal code 输入在不需要且未设置验证规则的地方突出显示为红色，因为它在 <div class="form-group required"> 内，其中 address_state 和 address_city 在同一 div 内进行验证规则设置，因此如果其中任何一个无效，则会触发错误类 .has-error .form-control 并突出显示 postal code 输入。

Fiddle 示例，其中postal code 输入以红色突出显示，但未设置验证规则。

解决方案： 在验证规则中设置自定义错误selector 例如row: '.col-xs-12',，这样它将覆盖默认错误类.has-error .form-control，并且只针对具有验证规则集的<div class="form-group required"> 中的输入并且有错误。

More Information

Plugin Example

Fiddle 带有自定义选择器的示例

$(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>

旁注：您必须将小提琴视图向左展开，或者在全页面视图中运行上面的 sn-p，它们将与所讨论的快照完全相同。