美文网首页
关于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