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

Question

这个问题纯粹是CSS。

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

http://jsfiddle.net/TLLe2/

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

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

 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：函数（错误，元素）{ if(error[0].innerHTML.length > 6){

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