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>

输出

现在问题是因为我需要将它们显示在内联中，所以我将它们放在同一组中，并且在验证时会产生问题。

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

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

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并仅定位{{1}内的输入1}}具有验证规则集并且有错误。

More Information

Plugin Example

Fiddle自定义选择器的示例

<div class="form-group required">

$(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'
                    }
                }
            }
        }
    });
});

SideNote：你必须将小提琴视图扩展到左侧，或者在整页视图中运行上面的片段，它们将完全像有问题的快照。

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

1 个答案: