1
jqueryの新機能で、3つのフォームを持つページに検証プラグインを実装しようとしました。最初のフォームを送信すると正常に動作します。ユーザー名とパスワードのみを必要とするページ（#loginForm）に2番目のフォームを送信しようとすると、電子メールアドレスを探しているフォームに検証エラーが表示されます。フォーム -1つのページに複数のフォームを検証する
<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コード：2番目と3番目のフォームが入れ子になっているが、それらはじゃないかのように
$(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を検証する習慣をつけてください。 :) – bzlm