jQuery验证.showErrors在div而不是alert

时间:2015-05-01 00:21:12

标签: jquery jquery-validate

我正在寻找一种方法来使用jQuery validator.showErrors方法在任何错误的同时在我的表单上方显示一般错误消息,同时显示每个字段的各个错误消息。我目前有以下代码,但想更改警报,而不是显示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

1 个答案:

答案 0 :(得分:-1)

真正的答案是:

HTML:

 <div id="signin_errors" >errors will go here</div>
    enter code here<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) {
          submitted = true;   
          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

我们需要在“ShowErrors”上推送“submitted = true”以获得完整的工作