Question

这个问题纯粹是CSS。

我正在使用Twitter Bootstrap 3构建一个简单的HTML联系表单。联系表单看起来很棒。为了验证表单字段，我使用了Bootstrap Validator插件。简单易用，易于集成插件。

这是我表单的初始版本。单击提交按钮而不输入字段时，将出现验证消息。

我只想突出显示未输入的红色字段，因此我使用了以下代码＆amp;从脚本中删除了验证消息。

 highlight: function (element) {
                            $(element).closest('.form-group').addClass('has-error');
                        },
                        unhighlight: function (element) {
                            $(element).closest('.form-group').removeClass('has-error');
                        }

现在......我的表单的新版本在以下小提琴中。

http://jsfiddle.net/XSf37/

现在点击提交按钮。所有字段都会突出显示，并且不会显示任何自定义消息。但是，即使没有消息，也会加载用于显示自定义消息的标签。

例如......

用于用户名字段，

<label for="txtusername" class="error"></label>

已加载...所以其他所有字段也是如此。这打破了我的表单布局。有没有办法删除这些标签或不加载这些标签????

提前致谢。

Answer 1

在验证功能中执行此操作：

errorPlacement: function(error,element) {
    return true;
  }

自定义错误放置功能（请参阅documentation）以停止创建空白标签。

FIDDLE

Answer 2

试试这个http://jsfiddle.net/XSf37/3/ 从html中删除错误标签标签

<form id="new-user-form" class="form-horizontal" role="form" action=""
    method="post">
    <div class="form-group ">
        <label for="txtusername" class="col-sm-3 control-label">Username*</label>
        <div class="col-sm-7">
            <input id="txtusername" name="txtusername" tabindex="1" type="text"
                class="form-control"> <span id="showusername"
                class="help-block"></span>
        </div>
    </div>
    <div class="form-group">
        <label for="txtfname" class="col-sm-3 control-label">First
            Name*</label>
        <div class="col-sm-7">
            <input id="txtfname" name="txtfname" tabindex="2" type="text"
                class="form-control">
        </div>
    </div>
    <div class="form-group">
        <label for="txtlname" class="col-sm-3 control-label">Last
            Name*</label>
        <div class="col-sm-7">
            <input id="txtlname" name="txtlname" tabindex="4" type="text"
                class="form-control">
        </div>
    </div>


    <div class="form-group">
        <label for="txtpassword" class="col-sm-3 control-label"">Password*</label>
        <div class="col-sm-7">
            <input id="txtpassword" name="txtpassword" tabindex="5"
                type="password" class="form-control">
        </div>
    </div>

    <div class="form-group">
        <label for="txtrpassword" class="col-sm-3 control-label">Repeat*</label>
        <div class="col-sm-7">
            <input id="txtrpassword" name="txtrpassword" type="password"
                tabindex="6" class="form-control">
        </div>
    </div>

    <div class="form-group">
        <label for="ddlgroup" class="col-sm-3 control-label">Group*</label>
        <div class="col-sm-7">
            <select id="ddlgroup" name="ddlgroup" tabindex="7"
                class="form-control">

                <option value="cxvxcv">value</option>

            </select>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-3 col-sm-7">

            <button id="butnid" type="submit" class="btn btn-success">Save
                User</button>
        </div>
    </div>
</form>

Answer 3

尝试控制错误消息的长度。

errorPlacement：function（error，element）{ if（error [0] .innerHTML.length＆gt; 6）{

6是因为我的空白标签错误是一个实体

在html-bootstrap表单中验证期间显示空标签

3 个答案:

FIDDLE