我使用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");
});
});
但是，如果我更改了订单，则在提交处理程序之前验证表单。
答案 0 :(得分：8)
您可以使用beforeSubmit回调设置值：
$(function() {
$('#form1').validate({
rules: {
txt1: { maxlength: 5 }
},
beforeSubmit: function(arr, $form, options) {
$('#txt1').val('123456');
return true;
}
});
});
答案 1 :(得分：2)
尝试
$(document).ready(function() {
$("#form1").submit(function() {
$("#txt1").val("123456");
$("#form1").validate({
rules: {
txt1: {
maxlength: 5
}
}
});
});
});
这种方式验证将由您的提交事件处理程序触发。
答案 2 :(得分：0)
您必须使用$("form").validate().resetForm();
答案 3 :(得分：0)
你可以简单地使用它：
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: ...
}
答案 4 :(得分：0)
<!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>