我正在制作一个表单,我正在使用令人惊叹的 JQuery 验证插件( http://docs.jquery.com/Plugins/Validation/ )。
此表格允许人们捐款并指定是否通过支票或信用卡付款。我使用单选按钮来显示信用卡 asp 面板或支票 asp 面板。
我的规则和消息都有效。但是,我希望创建一个规则,避免根据另一个因素(信用卡面板的可见性设置为“隐藏”)来验证表单的某些部分(信用卡面板)。
请原谅我即将向您提供的代码 - 我删除了大部分不相关的部分,只留下那些演示我的方法的部分。
我的body_onload javascrip方法:
function body_onload()
{
document.getElementById('<%=Cheque.ClientID %>').style.display = 'none';
document.getElementById('<%=CreditCard.ClientID %>').style.display = 'none';
}
用于选择付款方式的单选按钮:
<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>
还有我冗长的验证方法:
$(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 的必需属性,您可以在规则中执行此操作:
CCNumber:{
required: "#<%=CreditCard.ClientID %>:visible",
creditcard: "#<%=CreditCard.ClientID %>:visible"
}
此外,如果由于某种原因不受限制,您可以缩短 onload 中的其他语法:
$(function() {
$("#<%=Cheque.ClientID %>").hide();
$("#<%=CreditCard.ClientID %>").hide();
});
但是,我建议对它们应用“隐藏”CSS 样式以避免任何可能的闪烁,然后仅使用 $("#<%=Cheque.ClientID %>").show();
当您所做的任何事情触发它时显示它们的语法。无论您使用什么方法,:visible 选择器都会起作用,它的行为就像听起来一样。
关于jquery - 高级 JQuery 验证 : Avoiding Validations on Certain Conditions,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1316602/