美文网首页
关于jQuery validate在表单下方只显示第一条错误信息

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

作者: 阿黎转呀转 | 来源:发表于2017-10-29 15:36 被阅读600次

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
                }
            }
     });
});

3.其中errorElement是插入错误信息的地方,具体情况具体操作,没有实现的朋友可以留言交流。

相关文章

网友评论

      本文标题:关于jQuery validate在表单下方只显示第一条错误信息

      本文链接:https://www.haomeiwen.com/subject/bryypxtx.html