隐藏由 jQuery 验证创建的标签

Question

我有一个使用 jQuery 验证来验证的表单。我遇到的问题是，在用户与文本框交互后 jQuery 验证会在其下方插入一个标签，将其下方的所有内容向下推。这是我的 HTML 表单代码

<form id="addForm">
  <div class="form-group">
    <label for="first">First Name</label>
    <input type="text" class="form-control" name="first" id="first" placeholder="First Name">
 </div>
 <div class="form-group">
    <label for="last">Last Name</label>
    <input type="text" class="form-control" name="last" id="last" placeholder="Last Name">
 </div>
 <button type="submit" class="btn btn-primary">Send</button>
</form>

验证脚本

$('#addForm').validate({
    rules: {
        first: {
            required: true
        },
        last: {
            required: true
        }
    },
    highlight: function (element) {
        $(element).closest('.form-group').removeClass('has-success').addClass('has-danger');
        $(element).closest('.form-control').removeClass('form-control-success').addClass('form-control-danger');
    },
    success: function (element) {
        element.closest('.form-group').removeClass('has-danger');
    }

});

我尝试添加

element.closest('.error').hide();

到成功功能，但这没有做任何事情。我尝试添加一个空的 errorPlacement 函数

errorPlacement: function(error, element) {

}

它有点管用。但是，一旦错误被修复，它就会停止清除文本框周围错误突出显示的功能。

这是一个 link 到 JSFiddle

https://jsfiddle.net/q9bppocn/

Answer 1

你只需要删除标签就成功了。

JS

$('#addForm').validate({
    rules: {
        first: {
            required: true
        },
        last: {
            required: true
        }
    },
    highlight: function (element) {
        $(element).closest('.form-group').removeClass('has-success').addClass('has-danger');
        $(element).closest('.form-control').removeClass('form-control-success').addClass('form-control-danger');
    },
    success: function (element) {
      element.remove();
    }

});

这是一个jsFiddle.

Answer 2

由于插件会自动切换消息，因此您不必 "remove" 错误。

您应该简单地使用 unhighlight 和 highlight。它们是互补的功能，当它们一起工作时，将正确地切换错误。 success 函数仅用于在通常隐藏的情况下利用 label 元素。

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

演示：jsfiddle.net/vboantcf/

隐藏由 jQuery 验证创建的标签

Hide a label created by jQuery Validation

jquery

jquery-validate