Question

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

的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) {

}

它有点奏效。但是，它会停止在错误修复后文本框周围的错误突出显示被清除的功能。

这是JSFiddle的链接

https://jsfiddle.net/q9bppocn/

Answer 1

由于插件会自动切换消息，因此您不必“删除”错误。

您应该只使用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');
}

DEMO ：jsfiddle.net/vboantcf/

Answer 2

您必须在成功时删除标签。

<强> 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.

隐藏由jQuery验证创建的标签

2 个答案: