Question

我正在使用jquery验证加上bassistance.de的插件，验证错误显示在屏幕的特定区域中，除了无效的表单元素之外，这是通过指定一个空的errorPlacement函数来实现的。 valid（）方法。

<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逻辑中暴露出一个缺陷，在第一个逻辑清除后，您将看不到其他错误消息。我不确定这是否是最好的事情，但这就是你的评论所表明你想要的。您可以根据需要进行调整。

$("#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
});

DEMO：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

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

2 个答案: