【发布时间】：2012-02-20 14:57:15
【问题描述】：
jquery 新手并尝试在具有三个表单的页面上实现验证插件。提交第一个表格可以正常工作。在尝试提交仅需要用户名和密码的页面上的第二个表单 (#loginForm) 时，验证错误出现在下面的表单中，以查找电子邮件地址。表格--
<div class="newsTitle">REGISTER HERE</div>
<form id="registerForm" action="register.php" method="post" name="registerForm">
<b>Enter your email address</b><br>
<input type="text" id="emailrf" name="emailrf" size="30" maxlength="64"><p>
<b>Full Name</b><br>
<input type="text" id="full_namerf" name="full_namerf" size="30" maxlength="64"><p>
Choose Username <span class="cap">( 4-24 characters )</span><br>
<input type="text" id="usernamerf" name="usernamerf" size="24" maxlength="24"><p>
Choose Password <span class="cap">( 6-12 characters )</span><br>
<input type="text" id="passwordrf" name="passwordrf" size="12" maxlength="12"><p>
<input type="hidden" name="formStatusregister" value="register">
<input type="submit" id="rForm" class="subMit" name="srForm" value="REGISTER">
</form><p><br>
<div class="newsTitle">LOG IN PLEASE</div>
<form id="loginForm" action="register.php" method="post" name="loginForm">
<b class="red">username</b><br>
<input type="text" id="usernameli" name="usernameli" size="30"><p>
<b class="red">password</b><br>
<input type="password" id="passwordli" name="passwordli" size="30"><p>
<input type="checkbox" name="remember" value="yes"> Remember Me
<input type="hidden" name="formStatuslogin" value="submitted"><br>
<input type="submit" id="liForm" class="subMit" name="liForm" value="LOG-IN">
</form>
<p><br>
<div class="newsTitle">RETRIEVE YOUR LOG-IN INFO</div>
<form id="lostForm" action="register.php" name="lostForm" method="post">
Enter your email address and click SUBMIT.<p>
<input type="hidden" name="forgot" value="yes">
<b>email address</b><br>
<input type="text" id="emaill" name="emaill" size="30"><p>
<input type="hidden" name="referrer" value="">
<input type="hidden" name="formStatuslost" value="forgot">
<input type="submit" id="lForm" name="lForm" value="SUBMIT">
</form>
和js代码：
$(document).ready(
function() {
$('#lostForm').validate({
rules: {
emaill: {
required:true,
email:true
}
}
});
$('#loginForm').validate({
rules: {
usernameli:{
required:true,
rangelength:[6,24]
},
passwordli:{
required:true
}
}//--end rules
}); //--- END loginForm validate() ---//
$('#registerForm').validate({
rules: {
emailrf: {
required:true,
email:true,
remote:{
url:'check_email.php',
type:'post'
}
},
full_namerf: {
required:true,
letters:true
},
usernamerf:{
required:true,
rangelength:[6,24],
remote:{
url:'check_user.php',
type:'post'
}
},
passwordrf:{
required:true,
rangelength:[6,12]
}
}, //--end rules
messages:{
emailrf: {
remote:"This email is already registered"
},
usernamerf: {
remote:"Already in use - choose another"
}
} //end messages
}); //--- END registerForm validate() ---//
}); //--END ready---//
它的作用就像第二和第三形式是嵌套的，但它们不是。可能是什么问题？
【问题讨论】：
-
具有相同 ID 的多个元素会产生不可预知的损坏 DOM。 jQuery 无法对这样的页面做任何事情。养成在进行任何故障排除之前验证 HTML 的习惯。 :)
标签： jquery validation jquery-plugins