登録ページのリアルタイム フォーム検証の実装に成功しました。すべての入力が正しくなり、ユーザーが 2 つのチェック ボックス (用語と条件とプライバシー ポリシー）。私はそれを試してみましたが、これまでにやったことがないので、どこから始めればよいかよくわかりません。何人かの人に尋ねたところ、以下のJavaScriptの下部にある return false に関係しているようです。どんな助けでも大歓迎です。ありがとう
HTMLフォーム
<div id="overlay">
<div id="modal_wrapper">
<div id="modal_content">
<form id="jform" action="" method="post" enctype="multipart/form-data">
<div id="modal_content_left">
Register
<ul>
<li class="required" type="none">
<label>
<input type="text" class="reg_text tip" name="username" id="username" title="8 - 16 Characters" placeholder="Username*"/>
</label>
<label>
<br />
<input type="text" class="reg_text tip" name="email" id="email" title="Get Verified" placeholder="Email*"/>
</label>
<label>
<br />
<input type="password" class="reg_text tip" name="password" id="password" title="Min 8 Characters" placeholder="Password*"/>
</label>
<label>
<br />
<input type="password" class="reg_text tip" name="cpassword" id="cpassword" title="Min 8 Characters" placeholder="Verify Password*"/>
</label>
</li>
</ul>
</div><!---end modal_content_left--->
<div id="modal_content_right">
<!--<li class="required double" type="none">-->
<div id="payment_options">
<p>
<label><img src="images/index/images/paypal.png" width="78" height="38" alt="PayPal" />
<br />
<input type="radio" name="payment_selection" value="paypal" id="payment_selection_0" checked/>
</label>
<label><img src="images/index/images/alertpay.png" width="78" height="38" alt="Alertpay" />
<br />
<input type="radio" name="payment_selection" value="alertpay" id="payment_selection_1" />
</label>
<label><img src="images/index/images/check.png" width="78" height="38" alt="Check" /><br />
<input type="radio" name="payment_selection" value="check" id="payment_selection_2" />
</label>
</p>
<br /><br /><br /><br />
Account Type
<p>
<label><img src="images/index/images/demo.png" width="78" height="38" alt="Demo" />
<br />
<input type="radio" name="account_type" value="demo" class="demo_radio" id="account_type_0" />
</label>
<label><img src="images/index/images/real_account.png" width="78" height="38" alt="Real" /><br />
<input type="radio" name="account_type" value="real" id="account_type_1" checked/>
</label>
</p>
</div><!---end payment_options---><br /><br /><br />
<div id="final_reg">
<div id="check_boxes">
<p>
<li class="required" type="none">
<label>
<input type="checkbox" name="agree_cons" value="terms" id="agree_cons_0" />
I agree to Terms</label>
<br /><br />
<label>
<input type="checkbox" name="agree_cons" value="privacy" id="agree_cons_1" />
I agree to Privacy Policy</label>
</li>
<br />
</p></div><!---end check_boxes--->
<div id="register_submit">
<input name="submit" type="submit" class="register_submit"
id="register_submit" alt="Register" />
</div><!---end register_submit--->
</div><!---end final_reg--->
</div><!---end mofal_content_right--->
</form>
</div><!---end modal_content--->
<div id="error_display"></div><!---end error_display--->
</div><!---end modal_wrapper--->
JavaScript コード
$(document).ready(function () {
jFunc={
mustMatch: function(el,pt){
if (pt.test(el.val()))
el.removeClass('error').addClass('correct')
else{
jVal.errors = true;
el.removeClass('correct').addClass('error').effect("shake", { times:3, distance:5 }, 60);
}
},
mustEqual: function (el,val){
if (el.val()==val)
el.removeClass('error').addClass('correct')
else{
jVal.errors = true;
el.removeClass('correct').addClass('error').effect("shake", { times:3, distance:5 }, 60);
}
}
}
jVal = {
'username': function () {
jFunc.mustMatch($('#username'),/^(?=.*[a-z].*)\w{8,}$/i);
},
'email': function () {
jFunc.mustMatch($('#email'),/^.+@.+[.].{2,}$/i);
},
'password': function () {
jFunc.mustMatch($('#password'),/^.{8,}$/i);
},
'cpassword': function () {
jFunc.mustEqual($('#cpassword'),$('#password').val());
},
};
$('#username').change(jVal.username);
$('#email').change(jVal.email);
$('#password').change(jVal.password);
$('#cpassword').change(jVal.cpassword);
$('#jform').submit(function(){
$.each(jVal,function(i,v){
$.isFunction(v) && v()
})
return false // fix this when the code works.
})
});