我正在使用jQuery验证插件进行验证，并面临验证代码的一些问题。
如果我点击Save按钮验证错误消息会出现，但是如果我选择单选按钮并点击提交按钮页面会更新，这对我来说是错误的。
任何想法为什么页面令人耳目一新，我做错了什么？
这是我的JSFiddle：http://jsfiddle.net/mananpatel/qp8nm27t/
<form name="FrmEditAccountDetails" id="FrmEditAccountDetails" method="post" action="#">
<div class="box box-default">
<div class="box-header">
<h3 class="box-title">Payment Details</h3>
</div>
<div class="box-body">
<div class="form-group">
<label for="title">* Please select your prefered payment option</label>
<span class="has-error"></span>
</div>
<div class="form-group">
<div class="radio bank_div">
<label for="pd_bank_payment_option">
<input type="radio" name="pd_payment_option" id="pd_bank_payment_option" class="pd_bank_payment_option" value="bank">Bank details
</label>
</div>
<div class="radio paypal_div">
<label for="pd_paypan_payment_option">
<input type="radio" name="pd_payment_option" id="pd_paypan_payment_option" class="pd_bank_payment_option" value="paypal">Paypal email
</label>
</div>
<span class="has-error"></span>
</div>
<div class="form-group frm-grp1">
<div class="form-group">
<label for="pd_account_holder_name">Account Holder Name *</label>
<input type="text" name="pd_account_holder_name" value="" id="pd_account_holder_name" class="form-control" maxlength="50">
<span class="has-error"></span>
</div>
<div class="form-group">
<label for="pd_iban">IBAN *</label>
<input type="text" name="pd_iban" value="" id="pd_iban" class="form-control" maxlength="50">
<span class="has-error"></span>
</div>
<div class="form-group">
<label for="pd_bic_code">BIC code</label>
<input type="text" name="pd_bic_code" value="" id="pd_bic_code" class="form-control" maxlength="50">
<span class="has-error"></span>
</div>
<div class="form-group">
<label for="pd_bank_name">Bank name *</label>
<input type="text" name="pd_bank_name" value="" id="pd_bank_name" class="form-control" maxlength="50">
<span class="has-error"></span>
</div>
</div>
<div class="form-group frm-grp2 none">
<div class="form-group">
<label for="pd_paypal_email">Paypal email *</label>
<input type="text" name="pd_paypal_email" value="" id="pd_paypal_email" class="form-control" maxlength="50">
<span class="has-error"></span>
</div>
</div>
</div>
</div>
<div class="box-footer">
<button type="submit" class="btn bg-orange btn-flat save-account-details">Save</button>
<button type="button" class="btn btn-default btn-flat">Cancel</button>
</div>
</form>
<script type="text/javascript">
$(document).ready(function() {
// Code for show/hide divs
$(document.body).on('click', '.pd_bank_payment_option', function() {
if(this.value == "bank"){
$('.frm-grp2').hide();
$('.frm-grp1').show();
$("#pd_paypal_email").prop('disabled', true);
$("#pd_account_holder_name").prop('disabled', false);
$("#pd_iban").prop('disabled', false);
$("#pd_bic_code").prop('disabled', false);
$("#pd_bank_name").prop('disabled', false);
$('#FrmEditAccountDetails').valid();
}else{
$('.frm-grp2').show();
$('.frm-grp1').hide();
$("#pd_account_holder_name").prop('disabled', true);
$("#pd_iban").prop('disabled', true);
$("#pd_bic_code").prop('disabled', true);
$("#pd_bank_name").prop('disabled', true);
$("#pd_paypal_email").prop('disabled', false);
$('#FrmEditAccountDetails').valid();
}
});
// Code for form validation
$(document.body).on('click', '#FrmEditAccountDetails .save-account-details', function() {
if ($("#FrmEditAccountDetails").length) {
$("#FrmEditAccountDetails").validate({
onkeyup: false,
onfocusout: false,
errorElement: 'span',
// errorClass: 'has-error',
ignore: [],
rules: {
"pd_payment_option": {
required: true
},
"pd_account_holder_name": {
required: true
},
"pd_iban": {
required: true
},
"pd_bic_code": {
required: false
},
"pd_bank_name": {
required: true
},
"pd_paypal_email": {
required: false,
required: function(element) {
return $("input[name='pd_payment_option']:checked").val() == 'paypal';
}
}
},
messages: {
"pd_payment_option": {
required: "Please select your Payment Option."
},
"pd_account_holder_name": {
required: "Please enter your Account Holder Name."
},
"pd_iban": {
required: "Please enter your IBAN."
},
"pd_bic_code": {
required: "Please enter your BIC Code."
},
"pd_bank_name": {
required: "Please enter your Bank Name."
},
"pd_paypal_email": {
required: "Please enter your Paypal Email Address."
}
},
errorPlacement: function(error, element) {
error.insertAfter(element);
},
onfocusout: function(element, event) {
if (!this.checkable(element) && (element.name in this.submitted || !this.optional(element))) {
this.element(element);
}
},
submitHandler: function() {
alert('form is valid');
return false;
}
});
}
});
});
</script>
答案 0 :(得分：1)
您可以在document.ready上设置验证，这将解决部分问题。改变这个：
$(document.body).on('click', '#FrmEditAccountDetails .save-account-details', function() {
对此：
$(document.body).ready(function() {
此外，您无需设置所需：false并将其设置为pd_paypal_email的函数：
"pd_paypal_email": {
required: function(element) {
return $("input[name='pd_payment_option']:checked").val() == 'paypal';
}
就是这样！
答案 1 :(得分：-1)
你需要做e.preventDefault();
如果您不使用e.preventDefault()，则表单提交的默认行为将触发。它将浏览器发送到表单的action属性，浏览器将消失，你不想要它。
$(document.body).on('click', '#FrmEditAccountDetails .save-account-details', function(e) {
e.preventDefault();
if ($("#FrmEditAccountDetails").length) {
$("#FrmEditAccountDetails").validate({
onkeyup: false,
onfocusout: false,
errorElement: 'span',
// errorClass: 'has-err