关于jQuery validate在表单下方只显示第一条错误信息的实现方法

1.validate插件默认提示所有的验证不通过的错误信息，但很多时候需求只显示第一条错误信息。
2.附一个简单的Demo。

$().ready(function() {
    var errorMsg = "";
    var validator = $(".commonForm").validate({
        invalidHandler:function(form,validator){
            //只显示第一个错误信息
            $.each(validator.invalid,function(key,value){
                tmpkey = key;
                tmpval = value;
                validator.invalid = {};
                validator.invalid[tmpkey] = value;
                errorMsg = value;
                return false;
            });
        },
        submitHandler:function(){
            //表单验证成功
            localStorage.setItem("username",loginForm.username.value);
            localStorage.setItem("password",loginForm.password.value);
        },
        errorPlacement: function(error, element) {
            // Append error within linked label
            $( element )
                    .closest( "form" )
                    .find( ".formError-box" ).html('<span class="error">'+errorMsg+'</span>');
            // .append( error);
        },
        errorElement: "span",
        messages: {
            user: {
                required: " 请输入用户民",
                minlength: " 用户名至少包含3个字符"
            },
            password: {
                required: " 请输入密码",
                minlength: " 密码长度在5-12之间",
                maxlength: " 密码长度在5-12之间"
            }
        },
        rules:{
            username:{
                required:true,
                minlength:5
            },
            password:{
                required:true,
                minlength:5,
                maxlength:12
            }
        }
    });
});

转载于:https://my.oschina.net/u/3483680/blog/1826944