Jquery Validation - 更正输入后清除错误消息框

Question

我正在使用 jquery 验证加上来自 bassistance.de 的插件，验证错误显示在屏幕的特定区域，而不是在无效的表单元素之外，这是通过在有效的() 方法。

<div id="errbox" style="display: none"></div><br />
<form id="myform" method="post" action="#">
 <fieldset>
    <legend>1. Personal Details</legend>
    <label for="firstName">First Name:</label>
    <input type="text" id="firstName" name="firstName" size="30" required /> 
    <br /><br />
    <label for="lastName">Last Name:</label>
    <input type="text" id="lastName" name="lastName" size="30" required />
 </fieldset>
 <br />
 <input type="submit" value="Go" />            
</form>

我希望只要输入已被更正并且它对验证规则有效，错误消息就会消失/清除。如果我取出 errorPlacement 代码并将消息显示在无效元素旁边，则会发生这种情况，但如果我在指定框中显示错误消息，则不会。

这是我的js代码

$("#myform").validate({
 messages: {
    firstName: {required: "Please enter your First Name"},
    lastName: {required: "Please enter your last name -
                          your maiden name if married"},
 },
 invalidHandler: function(form, validator) {
 // This handler will show only one error at time - the first in this instance // 
       var errors = validator.numberOfInvalids();
       if (errors) {
             $("#errbox").html(validator.errorList[0].message);
             $("#errbox").show();
             validator.errorList[0].element.focus();
        } else {
             $("#errbox").hide();
        }
 },       
 errorPlacement: function(error, element) {
            // Override error placement to not show error messages beside elements //
 },    
});

您可以在这里尝试代码：http://jsfiddle.net/E7yPf/

我尝试显式声明 onKeyUp 和 onFocusOut 属性并将它们设置为 true，但没有效果。

这里有没有人可以帮助或指出正确的方向？

谢谢

Answer 1

您误解了invalidHandler 回调。 As per documentation，它仅在表单“无效”时在提交点击时触发。换句话说，当没有错误时，您的if (errors) 条件永远不会被看到，因此永远不会调用else hide()。

将hide() 放入success 回调中，只要字段通过验证，就会触发该回调。但是，这暴露了您的 invalidHandler 逻辑中的一个缺陷，在第一个错误消息被清除后，您将看不到其他错误消息。我不确定这是否是最好的做法，但这就是您的 cmets 表明您想要的。您可以根据需要进行调整。

$("#myform").validate({
    messages: {
        firstName: {
            required: "Please enter your First Name"
        },
        lastName: {
            required: "Please enter your last name - your maiden name if married"
        } // <- removed a trailing comma
    },
    invalidHandler: function (form, validator) {
        // This handler will show only one error at time - the first in this instance // 
        var errors = validator.numberOfInvalids();
        $("#errbox").html(validator.errorList[0].message);
        $("#errbox").show();
        validator.errorList[0].element.focus();
    },
    success: function () {
        $("#errbox").hide();
    },
    errorPlacement: function (error, element) {  // <- do not leave empty
        return false;  
    } // <- removed a trailing comma
});

演示：http://jsfiddle.net/pwgRC/

---

一些注意事项：

1) 该插件仅在 jQuery 1.9 版本中进行了测试，但是，您的 jsFiddle 使用的是 jQuery 版本 1.11.0。没有已知问题，但请谨慎操作。

2) 您不能将onkeyup 或onfocusout 设置为true。 As per documentation，这是一个无效的选择，因为它已经是默认行为。我见过true 破坏了这个插件。仅使用 false 或覆盖函数。

3) 不要将函数留空。如果要禁用errorPlacement回调函数，只需在里面放一个return false即可。

4) 我删除了一些尾随逗号。主要是旧版本 Internet Explorer 中的技术问题，但在 IMO 中，这是一种草率的编程。

---

替代方案：

使用errorContainer: "#errbox" 选项可以大大提高功能。然后您可以删除您的show/hide 代码和您的success 选项，因为errorContainer 会自动处理这些功能。

替代演示：http://jsfiddle.net/pwgRC/1/

然后通过使用errorLabelContainer 和wrapper 选项，您可以摆脱invalidHandler 和errorPlacement 函数。 （所有错误都会显示，而不是只显示第一个，但我希望您看到这些选项可用。）

替代演示 2：http://jsfiddle.net/pwgRC/2/

---

我建议你read through the documentation，这样你就可以为自己做出最好的决定。

Answer 2

我认为以下代码可以按您的意愿工作：

<span id="errbox"></span>
<form id="myform" method="post" action="#">
<fieldset>
    <legend>1. Personal Details</legend>
    <label for="firstName">First Name:</label>
    <input type="text" id="firstName" name="firstName" size="30" required /> 
    <br /><br />
    <label for="lastName">Last Name:</label>
    <input type="text" id="lastName" name="lastName" size="30" required />
</fieldset>
<br />
<input type="submit" value="Go" />            
</form>



$("#myform").validate({
    errorClass: 'validation-error',
    errorContainer:'#errbox',
    messages: {
        firstName: {required: "Please enter your First Name"},
        lastName: {required: "Please enter your last name - your maiden name if married"},
 },
 invalidHandler: function(form, validator) {
           // This handler will show only one error at time - the first in this instance // 
     //       var errors = validator.numberOfInvalids();
       //if (errors) {
             //$("#errbox").html(validator.errorList[0].message);
             //$("#errbox").show();
             //validator.errorList[0].element.focus();
        //} else {
          //   $("#errbox").html('');
        //}
  },       
  errorPlacement: function(error, element) {
               $("#errbox").html(error);
  },    
 });

 label.error {padding-left: .3em; color: #f00;}
 input.error {border: 1px solid #a00}
 .validation-error {border: 1px solid #f00; background-color: #fef1ec}

但是，您可以按照需要其他内容的文档进行操作：Jquery validate