jQuery 在 div 中验证 .showErrors 而不是警报

Question

我正在寻找一种方法来使用 jQuery validator.showErrors 方法在出现任何错误时在我的表单上方显示一般错误消息，同时显示在 div 每个字段的错误消息。我目前有以下代码，但想更改警报以显示 div 或类似内容。非常感谢任何帮助。

$(document).ready(function() {
$('#signin').validate({
    rules: {
        email: {
            required: true,
            email: true
        },
        password:   {
            required: true,
            rangelength:[8,16]
        }
    },  //end rules
    messages: {
        email: {
            required: 'Required field',
            email: 'This is not a valid email address'
        },
        password: {
            required: 'Please type a password',
            rangelength: 'Password must be between 8 and 16 characters long.'
        }
    },//end messages
    errorPlacement: function(error, element) {
        if( element.is(':radio') || element.is(':checkbox')) {
            error.appendTo(element.parent());
        } else {
            error.insertAfter(element);
        }
    },//end errorPlacement
    showErrors: function(errorMap, errorList) {
        if (submitted) {
            var summary = "You have the following errors: \n";
            $.each(errorList, function() { summary += " * " + this.message + "\n"; });
            alert(summary);
            submitted = false;
        }
        this.defaultShowErrors();
    },          
    invalidHandler: function(form, validator) {
        submitted = true;
    }
});//end validate
}); // end ready

Answer 1

向 div 添加值非常简单，您的代码几乎完成，您只需创建一个 div 并向其中插入数据：

HTML:

<div id="signin_errors" >errors will go here</div>
<br/>
<form id="signin" type="post" >
    email: <input id="email" name="email"/>
    <br/>
    pass: <input id="password" name="password"/>
    <input type= "submit"/>
</form>

JS:

$('#signin').validate({
    rules: {
        email: {
            required: true,
            email: true
        },
        password:   {
            required: true,
            rangelength:[8,16]
        }
    },  //end rules
    messages: {
        email: {
            required: 'Required field',
            email: 'This is not a valid email address'
        },
        password: {
            required: 'Please type a password',
            rangelength: 'Password must be between 8 and 16 characters long.'
        }
    },//end messages
    errorPlacement: function(error, element) {
        if( element.is(':radio') || element.is(':checkbox')) {
            error.appendTo(element.parent());
        } else {
            error.insertAfter(element);
        }
    },//end errorPlacement
    showErrors: function(errorMap, errorList) {
        if (submitted) {
            var summary = "You have the following errors: <br/>";
            $.each(errorList, function() { summary += " * " + this.message + "<br/>"; });
            $("#signin_errors").html(summary);
            submitted = false;
        }

        this.defaultShowErrors();
    },          
    invalidHandler: function(form, validator) {
        submitted = true;
    }
});//end validate

working fiddle

jQuery 在 div 中验证 .showErrors 而不是警报

jQuery validation .showErrors in div instead of alert

jquery

jquery-validate