带有提交处理程序的 jQuery 验证答案

【问题标题】：jQuery validation with submit handler带有提交处理程序的 jQuery 验证
【发布时间】：2009-08-02 08:18:42
【问题描述】：

我使用 jQuery 验证插件的 validate 方法设置表单验证，并且我有一个修改输入元素值的提交处理程序（我使用 YUI 编辑器，它需要调用 saveHTML() 来将 iframe 的内容复制到 textarea 元素。 )。提交表单时，我希望验证器在执行我的提交处理程序后验证表单。但如果它在验证调用之后注册，它不会执行我的提交处理程序。

例如，

<form id="form1" action="/test">
    <input type="text" name="txt1" id="txt1" />
    <input type="submit" value="submit" />

$(document).ready(function() {
    $("#form1").submit(function() {
        $("#txt1").val("123456");
    });

    $("#form1").validate({
        rules: {
            txt1: {
                maxlength: 5
            }
        }
    });
});

在我的提交处理程序之后验证表单，因此提交被取消。

$(document).ready(function() {
    $("#form1").validate({
        rules: {
            txt1: {
                maxlength: 5
            }
        }
    });

    $("#form1").submit(function() {
        $("#txt1").val("123456");
    });
});

但是，如果我更改顺序，表单会在我的提交处理程序之前进行验证。

【问题讨论】：

这不是一个真正的问题。我猜 validate 方法返回 false 以取消剩余的 onSubmit 绑定函数。如果你把 return false;在您修改#txt1 之后，我确定不会调用验证函数。

标签： jquery jquery-validate

【解决方案1】：

您可以使用beforeSubmit 回调来设置值：

$(function() {
    $('#form1').validate({
        rules: {
            txt1: { maxlength: 5 }
        },
        beforeSubmit: function(arr, $form, options) {
            $('#txt1').val('123456');
            return true;
        }
    });
});

【讨论】：

这是jQuery Form的一个方法。它是如何与 jQuery Validate 绑定的？

【解决方案2】：

试试

$(document).ready(function() {
    $("#form1").submit(function() {
        $("#txt1").val("123456");

        $("#form1").validate({
            rules: {
                    txt1: {
                            maxlength: 5
                    }
            }
        });
    });
});

这种方式验证将由您的提交事件处理程序触发。

【讨论】：

.validate() 方法仅用于初始化插件，因此它不属于submit 处理程序。包括submit 在内的所有触发事件都会被插件自动捕获。正确使用请参考docs和tag wiki page。

【解决方案3】：

你必须使用$("form").validate().resetForm();

【讨论】：

没有帮助，因为太简洁了。在哪里？为什么？

【解决方案4】：

你可以简单地使用这个：

var validForm = false;

SubmittingForm = function () 
{    
     //Validate Statements...
     validForm = true;
     $("#form1").submit();
}

$(document).ready(function () {
$("#form1").validate({
            submitHandler: function (form) {
                if (validForm)
                    $("#form1").submit();
                else
                    SubmittingForm();
            },
            rules: ...
}

【讨论】：

【解决方案5】：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script src="jquery-3.1.1.min.js"></script>
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
  
<style type="text/css">
p1{
    color:orange;
}
p2{
    color:green;
}

 

body{
                
                }
        
            #form label{
                font:bold 11px arial;
                color: #565656;
                padding-left: 1px;
            }
            #form label.mandat{color:red;}
            #form input[type="text"]{
                height: 30px;
                margin-bottom: 8px;
                padding: 5px;
                font: 12px arial;
                color: olive;
            }
            #form textarea{
                width: 340px;
                height: 80px;
                resize: none;
                margin: 0 0 8px 1px;
                padding: 5px;
                font: 12px arial;
                color: yellow;
            }
            #form img{
                margin-bottom: 8px;
            }
            #form input[type="submit"]{
                background-color: #0064aa;
                border: none;
                color: #fff;
                padding: 5px 8px;
                cursor: pointer;
                font:bold 12px arial;
            }
            .error{
                border: 1px solid olive;
            }
            .cap_status{
                width: 350px;
                padding: 10px;
                font: 14px arial;
                color: #fff;
                background-color: #10853f;
                display: none;
            }
            .cap_status_error{
                background-color: #bd0808;                
            }


</style>
  
  <script>
  
   $.validator.addMethod("error1", function(value, element, error) {          
    return error.test(value);
});

   $.validator.addMethod("error2", function(value, element, error) {          
    return error.test(value);
});

 $.validator.addMethod("error3", function(value, element, error) {          
    return error.test(value);
}); 
$.validator.addMethod("error4", function(value, element, error) {
   return error.test(value);
});

    $.validator.addMethod("error5", function(value, element, error) {          
    return error.test(value);
}); 
  
$.validator.addMethod("error6", function(value, element, error) {          
    return error.test(value);
});

$.validator.addMethod("error7", function(value, element, error) {          
    return error.test(value);
});
$.validator.addMethod("error8", function(value, element, error) {          
    return error.test(value);
} );






  $(function() {
  
  
    $("#register-form").validate({
    
       
        rules: {
           
               firstname: {
                required: true,
                error1: /^[A-Za-z']+( [A-Za-z']+)*$/
                
            },
            lastname: {
                required: true,
                error2: /^[A-Za-z']+( [A-Za-z']+)*$/
              
            },
                address: {
                required: true,
                error3: /^[0-9,./\-_ a-zA-Z''\s a-zA-Z0-9]+$/
                
            },
            pincode: {
                required: true,
                error4: /^[1-9][0-9]{5}$/
                
            },


             city:  {
                required: true
            },


            dob:  {
                required: true
            },
            
           

            
              mobileno: {
                required: true,
                error5: /[7|8|9][0-9]{9}/,
                maxlength: 10
            },
            emailid: {
                required: true,
                error6: /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)+$/
                
            },

            
            
            password: {
                required: true,
                error7: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{6,16}$/
              
            },
            cpassword: {
                required: true,
                error8: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{6,16}$/,
               equalTo: "#password"
               
            },
           
       
        
        


        },

        messages: {


          firstname: {
                required: "<p1>Please enter your first name</p1>",
               
                error1: "<p2>name must be content alphabet</p2>"
            }, 
            lastname: {
                required: "<p1>Please enter your last name</p1>",
                
                error2: "<p2>name must be content only alphabet</p2>"
            }, 




            address: {
                required: "<p1>Please enter address</p1>",
                
                error3: "<p2>name must be content alphabet with no</p2>"
            },   


            pincode: {
                required: "<p1>Please enter pincode</p1>",
                
                error4: "<p2>6 digit number only require</p2>"
            },

             city: {
            required: "<p1>Please choose city</p1>"
        },


          dob: {
            required: "<p1>Please enter date of birth</p1>"
        },


            mobileno: {
                required: "<p1>require contact no</p1>",
                
                error5: "<p2>no start with 7,8,9 with 10 digit</p2> "
            },



            emailid: {
                required: "<p1>require email </p1>",
                
                error6: "<p2>please enter email with @ and . </p2> "
            },




            password: {
                required: "<p1>Please provide a password",
                error7: "<p2> password require at least lower,upper,numeric,alphabet,special character</p2>"
            },
             cpassword: {
                required: "<p1>Please provide a password</p1>",
               error8: "<p2>password require at least lower,upper,numeric,alphabet,special character</p2>",
               equalTo: "<p1>Password not match</p1>"
            }, 

            
            
           
            

        },
        
        submitHandler: function(form) {
            form.submit();
        }
    });

  });
  
  </script>
  

</head>
<body>

 <div style='margin:0 auto'>

<form name= "" id="register-form" action="loginformjq.php"  method="post">
<div id="form">
<table  border="1" padding="2" cellpadding="2" width="20%" bgcolor="lightblue" align="center" cellspacing="2">

<tr>
<td colspan=2>
<center><font size=4><p style="color: purple"><marquee direction="left" behavior="alternate" style="border:solid olive">Student Registration Form</marquee></p></font></center>
</td>
</tr>

<tr>
<td><p style="color: yellow">Firstname</p></td>
<td><p class="error"><input type="text" name="firstname" id="firstname" size="20" value=""></p>
</td>
</tr>

<tr>
<td><p style="color: yellow">Lastname</p></td>
<td><p class="error"><input type="text" name="lastname" id="lastname" size="20" value=""></p>
</td>
</tr>



<tr>
<td><p style="color: yellow">Address</p></td>
<td><p class="error"><input type="text" name="address" id="address" size="20"></p>
</td>
</tr>

<tr>
<td><p style="color: yellow">Pincode</p></td>
<td><p class="error"><input type="text" name="pincode" id="pincode" size="20"></p>
</td>
</tr>



<tr>
<td><p style="color: yellow">City</td>
<td><select name="city">
<p1><option value="" selected>select city</option>
<option value="New Delhi">NEW DELHI</option>
<option value="Mumbai">MUMBAI</option>
<option value="Goa">GOA</option>
<option value="Patna">PATNA</option>
</select></p1>
</td>
</tr>





<tr>
<td><p style="color: yellow">DOB</p></td>
<td><p class="error"><input type="date" name="dob" id="dob" size="20"></p>
</td>
</tr>

<tr>
<td><p style="color: yellow">MobileNo</p></td>
<td><p class="error"><input type="text" name="mobileno" id="mobileno" size="20"></p>
</td>
</tr>



<tr>
<td><p style="color: yellow">EmailId</p></td>
<td><p class="error"><input type="text" name="emailid" id="emailid" size="20"></p>
</td>
</tr>



<tr>
<td><p style="color: yellow">password</p></td>
<td><p class="error"><input type="password" id="password" name="password" size="20"></p>
</td>
</tr>

<tr>
<td><p style="color: yellow">cpassword</p></td>
<td><p class="error"><input type="password" id="cpassword" name="cpassword" size="20"></p>
</td>
</tr>
                  

<tr>
<p style="color: yellow"></p>
<td colspan="1"><input type="submit" value="submit"></td>

</tr>
</table>
</div>
</form>
  

        </div>
</body>
</html>

【讨论】：

你想在onkey之前直播显示错误，blur set是true onkeyup : true, rules: { FirstName: { required: true, error1: /^[A-Za-z' ]+( [A-Za-z']+)*$/ },