问题描述
我正在使用一个令人惊叹的JQuery验证插件( http: //docs.jquery.com/Plugins/Validation/).
I'm making a form that I'm using the amazing JQuery validation plugin for (http://docs.jquery.com/Plugins/Validation/).
此表格允许人们进行捐赠并指定他们将以支票或信用卡付款.我使用单选按钮来显示信用卡asp面板或支票asp面板.
This form allows people to make donations and to specify if they will be paying by cheque or credit card. I use radio buttons to show either the credit card asp panel, or the cheque asp panel.
我的规则和消息全部正常.但是,我希望创建一个规则,避免根据另一个因素(信用卡面板的可见性设置为隐藏")来验证表单的某些部分(信用卡面板).
My rules and messages are all working. However, I wish to create a rule that avoids validating certain parts of the form (the creditcard panel) depending on another factor (the credit card panel's visibility being set to 'hidden').
请原谅我将要困扰您的代码-我删除了大部分不相关的部分,只保留了那些说明我要解决此问题的方法.
Please excuse the code I'm about to innundate you with - I stripped out most of the irrelevant parts, leaving in only those that demonstrate my methods of going about this.
我的body_onload javascrip方法:
My body_onload javascrip method:
function body_onload()
{
document.getElementById('<%=Cheque.ClientID %>').style.display = 'none';
document.getElementById('<%=CreditCard.ClientID %>').style.display = 'none';
}
我的单选按钮,选择付款方式:
My radio buttons to select a payment method:
<div style="width:430px; padding:5px;"><b>Payment Method:</b>
<input type="radio" name="PaymentMethod" value="Cheque" onclick="ShowPaymentPanel(this.value)"/>Cheque <input type="radio" name="PaymentMethod" value="CreditCard" onclick="ShowPaymentPanel(this.value)"/>Credit Card</div>
还有我冗长的validate方法:
And my lengthy validate method:
$(document).ready(function(){
jQuery.validator.addMethod("phoneUS", function(phone_number, element) {
phone_number = phone_number.replace(/\s+/g, "");
return this.optional(element) || phone_number.length > 9 &&
phone_number.match(/^(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/);
}, "<br/> Please specify a valid phone number");
// validate form on keyup and submit
$("#TransactionForm").validate({
rules: {
FirstName: "required",
LastName: "required",
Phone: {
required: true,
phoneUS: true
},
CCName:{
required: true
},
CCNumber:{
required: true,
creditcard: true
},
CCExpiry:{
required: true,
digits: true,
minlength: 4,
maxlength: 4
}
},
messages: {
FirstName: "<br/> Required",
LastName: "<br/> Required",
Phone: {required: "<br/> Required"},
CCName: "<br/> Please enter the name on the card",
CCNumber: {
required: "<br/> Please enter the card number",
creditcard: "<br/> Please enter a valid card number"
},
CCExpiry: {
required: "<br/> Please enter the expiry date",
minlength: "<br/> Please enter as MMYY",
maxlength: "<br/> Please enter as MMYY",
digits: "<br/> Date must be numeric"
}
}
});
});
任何帮助将不胜感激!
推荐答案
验证插件可以做到这一点,对于不限于true/false的必需属性,您可以在规则中执行以下操作:
The validation plugin allows for this, for a required attribute you aren't restricted to true/false, you can do this in your rules:
CCNumber:{
required: "#<%=CreditCard.ClientID %>:visible",
creditcard: "#<%=CreditCard.ClientID %>:visible"
}
此外,如果由于某些原因不受限制,则可以缩短onload中的其他语法:
Also, you can shorten your other syntax in the onload if you aren't restricted for some reason:
$(function() {
$("#<%=Cheque.ClientID %>").hide();
$("#<%=CreditCard.ClientID %>").hide();
});
但是,我建议对它们应用隐藏的" css样式以避免任何可能的闪烁,然后在执行任何操作时仅使用$("#<%=Cheque.ClientID %>").show();
语法向他们显示.无论采用哪种方法,:visible选择器都将起作用,其作用与听起来完全一样.
However, I'd suggest applying a "hidden" css style to them to avoid any possible flicker, then just using the $("#<%=Cheque.ClientID %>").show();
syntax to show them when whatever you do triggers it. Whatever method you go with, then :visible selector will work, it acts exactly like it sounds.
这篇关于高级JQuery验证:避免在某些条件下进行验证的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!