Question

我创建了一个分为4个选项卡的表单，并且我已经在表单中添加了bootstrap验证器来测试输入的有效性。

在这个jsfiddle.net上，我重新创建了表单的一部分。

当您在不向表单输入任何数据的情况下按提交时，它将显示X符号并为输入红色着色。应该如此。

但是，其他有效的输入也显示为红色。它确实显示了ok符号。但是盒子是红色的。

我做错了什么？

HTML

<form method="post" id="mainForm">
    <div id="content">
        <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
            <li class="active"><a href="#regi" data-toggle="tab" class="tab" id="regi_tab">Registrant</a>

            </li>
            <li><a href="#admin" data-toggle="tab" class="tab" id="admin_tab">Administrative</a>

            </li>
            <li><a href="#tech" data-toggle="tab" class="tab" id="tech_tab">Technical</a>

            </li>
            <li><a href="#billing" data-toggle="tab" class="tab" id="billing_tab">Billing</a>

            </li>
        </ul>
        <div id="my-tab-content" class="tab-content">
            <div class="tab-pane active form-group" id="regi">
                    <h3>Registrant</h3>

                <div style="width:300px;">
                    <div class="form-group">
                        <label>First Names</label>
                        <br>
                        <input class="form-control" name="regi_form_fname" type="text" value="">
                    </div>
                    <div class="form-group">
                        <label>Last Names</label>
                        <br>
                        <input class="form-control" name="regi_form_lname" type="text" value="Doe DOE">
                    </div>
                </div>
            </div>
            <div class="tab-pane" id="admin">
                    <h3>Administrative</h3>

                <div style="width:300px;">
                    <div class="form-group">
                        <label>First Names</label>
                        <br>
                        <input class="form-control" name="admin_form_fname" type="text" value="John harry">
                    </div>
                    <div class="form-group">
                        <label>Last Names</label>
                        <br>
                        <input class="form-control" name="admin_form_lname" type="text" value="Doe DOE">
                    </div>
                </div>
            </div>
            <div class="tab-pane" id="tech">
                    <h3>Technical</h3>

                <div style="width:300px;">
                    <div class="form-group">
                        <label>First Names</label>
                        <br>
                        <input class="form-control" name="tech_form_fname" type="text" value="John harry">
                    </div>
                    <div class="form-group">
                        <label>Last Names</label>
                        <br>
                        <input class="form-control" name="tech_form_lname" type="text" value="Doe DOE">
                    </div>
                </div>
            </div>
            <div class="tab-pane" id="billing">
                    <h3>Billing</h3>

                <div style="width:300px;">
                    <div class="form-group">
                        <label>First Names</label>
                        <br>
                        <input class="form-control" name="billing_form_fname" type="text" value="John harry">
                    </div>
                    <div class="form-group">
                        <label>Last Names</label>
                        <br>
                        <input class="form-control" name="billing_form_lname" type="text" value="Doe DOE">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br>
    <input class="btn btn-success" name="dosubmit" type="submit" value="Update Domain Contacts">
</form>

的javascript

$(document).ready(function () {

    $('#mainForm')
        .bootstrapValidator({
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            'regi_form_fname': {
                validators: {
                    notEmpty: {
                        message: 'This field is required'
                    },
                    stringLength: {
                        max: 30,
                        message: 'Cannot be longer then 30 characters'
                    }
                }
            },
                'regi_form_lname': {
                validators: {

                    notEmpty: {
                        message: 'This field is required'
                    },
                    stringLength: {
                        max: 30,
                        message: 'Cannot be longer then 30 characters'
                    }
                }
            },
                'admin_form_fname': {
                validators: {

                    notEmpty: {
                        message: 'This field is required'
                    },
                    stringLength: {
                        max: 30,
                        message: 'Cannot be longer then 30 characters'
                    }
                }
            },
                'admin_form_lname': {
                validators: {

                    notEmpty: {
                        message: 'This field is required'
                    },
                    stringLength: {
                        max: 30,
                        message: 'Cannot be longer then 30 characters'
                    }
                }
            },
                'tech_form_fname': {
                validators: {

                    notEmpty: {
                        message: 'This field is required'
                    },
                    stringLength: {
                        max: 30,
                        message: 'Cannot be longer then 30 characters'
                    }
                }
            },
                'tech_form_lname': {
                validators: {

                    notEmpty: {
                        message: 'This field is required'
                    },
                    stringLength: {
                        max: 30,
                        message: 'Cannot be longer then 30 characters'
                    }
                }
            },
                'billing_form_fname': {
                validators: {

                    notEmpty: {
                        message: 'This field is required'
                    },
                    stringLength: {
                        max: 30,
                        message: 'Cannot be longer then 30 characters'
                    }
                }
            },
                'billing_form_lname': {
                validators: {

                    notEmpty: {
                        message: 'This field is required'
                    },
                    stringLength: {
                        max: 30,
                        message: 'Cannot be longer then 30 characters'
                    }
                }
            }
        }
    });
});

Answer 1

这有点棘手。问题是您在.form-group容器上将#regi类添加到两个字段上，当第一个容器出错时，#regi容器添加了.has-error类，因此整件事无效（错误地将.has-error添加到有效字段中）。

删除此行上的form-group：

<div class="tab-pane active form-group" id="regi">

制作它：

<div class="tab-pane active" id="regi">

这应该解决它：）

bootstrap验证器在有效输入上添加has-error类

1 个答案: