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

Posted 2023-02-22

【中文标题】Bootstrap 表单验证验证同一表单组内的所有字段

【英文标题】：Bootstrap form validation validates all the fields inside same form group

【发布时间】：2016-01-01 18:17:45

【问题描述】：

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

我的 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 中，这会在验证时产生问题。

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

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

【问题讨论】：

bootstrap 现在可以验证还是您正在使用外部插件来验证？

我正在使用引导表单验证插件。像这样-formvalidation.io/examples/contact-form。它验证了我的表单，但问题是它考虑了同一表单组中的所有字段。在我的情况下，我不想验证邮政编码，也没有为它编写任何验证逻辑。仍然当我单击保存按钮时，邮政编码也显示为红色。如何解决。

但在您在此处链接的页面的示例中，插件是通过 jquery 代码初始化的。您可以粘贴您在问题中制作的代码吗？显然你应该从“字段：”对象中删除邮政编码字段。

我只是说我没有为字段中的邮政编码编写任何验证逻辑：。发生这种情况是因为我的邮政编码字段位于城市/州/邮编的通用表单组内，并且引导程序验证了该组。你能帮我写下html吗？我需要在将城市/州/邮政编码保留在单独的表单组中的同时实现图像结果。我相信这会解决问题。

您需要发布代码的工作示例（这包括您编写/正在使用的验证）。 ***.com/help/mcve

【参考方案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，它们将与所讨论的快照完全相同。

【讨论】：

嘿，谢谢。你帮我指出了我的错误。相同的表单组不是问题。问题是我忘记在验证代码中添加 - row: '.col-xs-12' 。现在解决了。 :-)

现在，我可以解释答案了，不客气:)

我了解您的解决方案。实际上我做了同样的事情，但你的解决方案有效，但不是我的。所以我请你解释一下这个修复。后来从萤火虫中，我指出在提交表单之前添加了 has-feedback 类，然后我将我的验证代码与您的验证代码进行了比较，最后注意到了我的错误。 :-D。