草庐IT

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

coder 2025-01-12 原文

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

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

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

我的问题是如何如图所示内联显示它们,同时将它们保存在单独的表单组中,这样验证就不会受到影响。

最佳答案

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

原因: postal code输入在不需要且未设置验证规则的地方突出显示为红色,因为它在 <div class="form-group required"> 中其中 address_stateaddress_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>

旁注:您必须向左展开 fiddle View ,或者在完整页面 View 中运行上面的代码片段,它们将与所讨论的快照完全一样。

关于javascript - Bootstrap 表单验证验证同一表单组内的所有字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32942717/

有关javascript - Bootstrap 表单验证验证同一表单组内的所有字段的更多相关文章

  1. ruby-on-rails - 如何验证 update_all 是否实际在 Rails 中更新 - 2

    给定这段代码defcreate@upgrades=User.update_all(["role=?","upgraded"],:id=>params[:upgrade])redirect_toadmin_upgrades_path,:notice=>"Successfullyupgradeduser."end我如何在该操作中实际验证它们是否已保存或未重定向到适当的页面和消息? 最佳答案 在Rails3中,update_all不返回任何有意义的信息,除了已更新的记录数(这可能取决于您的DBMS是否返回该信息)。http://ar.ru

  2. ruby - 具有身份验证的私有(private) Ruby Gem 服务器 - 2

    我想安装一个带有一些身份验证的私有(private)Rubygem服务器。我希望能够使用公共(public)Ubuntu服务器托管内部gem。我读到了http://docs.rubygems.org/read/chapter/18.但是那个没有身份验证-如我所见。然后我读到了https://github.com/cwninja/geminabox.但是当我使用基本身份验证(他们在他们的Wiki中有)时,它会提示从我的服务器获取源。所以。如何制作带有身份验证的私有(private)Rubygem服务器?这是不可能的吗?谢谢。编辑:Geminabox问题。我尝试“捆绑”以安装新的gem..

  3. ruby-on-rails - Rails 编辑表单不显示嵌套项 - 2

    我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib

  4. ruby - 如何以所有可能的方式将字符串拆分为长度最多为 3 的连续子字符串? - 2

    我试图获取一个长度在1到10之间的字符串,并输出将字符串分解为大小为1、2或3的连续子字符串的所有可能方式。例如:输入:123456将整数分割成单个字符,然后继续查找组合。该代码将返回以下所有数组。[1,2,3,4,5,6][12,3,4,5,6][1,23,4,5,6][1,2,34,5,6][1,2,3,45,6][1,2,3,4,56][12,34,5,6][12,3,45,6][12,3,4,56][1,23,45,6][1,2,34,56][1,23,4,56][12,34,56][123,4,5,6][1,234,5,6][1,2,345,6][1,2,3,456][123

  5. ruby-on-rails - 如果为空或不验证数值,则使属性默认为 0 - 2

    我希望我的UserPrice模型的属性在它们为空或不验证数值时默认为0。这些属性是tax_rate、shipping_cost和price。classCreateUserPrices8,:scale=>2t.decimal:tax_rate,:precision=>8,:scale=>2t.decimal:shipping_cost,:precision=>8,:scale=>2endendend起初,我将所有3列的:default=>0放在表格中,但我不想要这样,因为它已经填充了字段,我想使用占位符。这是我的UserPrice模型:classUserPrice回答before_val

  6. ruby - 将 Bootstrap Less 添加到 Sinatra - 2

    我有一个ModularSinatra应用程序,我正在尝试将Bootstrap添加到应用程序中。get'/bootstrap/application.css'doless:"bootstrap/bootstrap"end我在views/bootstrap中有所有less文件,包括bootstrap.less。我收到这个错误:Less::ParseErrorat/bootstrap/application.css'reset.less'wasn'tfound.Bootstrap.less的第一行是://CSSReset@import"reset.less";我尝试了所有不同的路径格式,但它

  7. ruby - Highline 询问方法不会使用同一行 - 2

    设置:狂欢ruby1.9.2高线(1.6.13)描述:我已经相当习惯在其他一些项目中使用highline,但已经有几个月没有使用它了。现在,在Ruby1.9.2上全新安装时,它似乎不允许在同一行回答提示。所以以前我会看到类似的东西:require"highline/import"ask"Whatisyourfavoritecolor?"并得到:Whatisyourfavoritecolor?|现在我看到类似的东西:Whatisyourfavoritecolor?|竖线(|)符号是我的终端光标。知道为什么会发生这种变化吗? 最佳答案

  8. ruby-on-rails - 如何验证非模型(甚至非对象)字段 - 2

    我有一个表单,其中有很多字段取自数组(而不是模型或对象)。我如何验证这些字段的存在?solve_problem_pathdo|f|%>... 最佳答案 创建一个简单的类来包装请求参数并使用ActiveModel::Validations。#definedsomewhere,atthesimplest:require'ostruct'classSolvetrue#youcouldevencheckthesolutionwithavalidatorvalidatedoerrors.add(:base,"WRONG!!!")unlesss

  9. ruby-on-rails - form_for 中不在模型中的自定义字段 - 2

    我想向我的Controller传递一个参数,它是一个简单的复选框,但我不知道如何在模型的form_for中引入它,这是我的观点:{:id=>'go_finance'}do|f|%>Transferirde:para:Entrada:"input",:placeholder=>"Quantofoiganho?"%>Saída:"output",:placeholder=>"Quantofoigasto?"%>Nota:我想做一个额外的复选框,但我该怎么做,模型中没有一个对象,而是一个要检查的对象,以便在Controller中创建一个ifelse,如果没有检查,请帮助我,非常感谢,谢谢

  10. ruby-on-rails - 如何将验证与模型分开 - 2

    我有一些非常大的模型,我必须将它们迁移到最新版本的Rails。这些模型有相当多的验证(User有大约50个验证)。是否可以将所有这些验证移动到另一个文件中?说app/models/validations/user_validations.rb。如果可以,有人可以提供示例吗? 最佳答案 您可以为此使用关注点:#app/models/validations/user_validations.rbrequire'active_support/concern'moduleUserValidationsextendActiveSupport:

随机推荐