高级JQuery验证:避免在某些条件下进行验证 [英] Advanced JQuery Validation: Avoiding Validations on Certain Conditions

问题描述

我正在使用一个令人惊叹的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>&nbsp;&nbsp;
    <input type="radio" name="PaymentMethod" value="Cheque" onclick="ShowPaymentPanel(this.value)"/>Cheque &nbsp;&nbsp;&nbsp;<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/>&nbsp;&nbsp;&nbsp;&nbsp;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/>&nbsp;&nbsp;&nbsp;&nbsp;Required",
                LastName: "<br/>&nbsp;&nbsp;&nbsp;&nbsp;Required",
                Phone: {required: "<br/>&nbsp;&nbsp;&nbsp;&nbsp;Required"},
                CCName: "<br/>&nbsp;&nbsp;&nbsp;&nbsp;Please enter the name on the card",
                CCNumber: {
                    required: "<br/>&nbsp;&nbsp;&nbsp;&nbsp;Please enter the card number",
                    creditcard: "<br/>&nbsp;&nbsp;&nbsp;&nbsp;Please enter a valid card number"
                },
                CCExpiry:  {
                    required: "<br/>&nbsp;&nbsp;&nbsp;&nbsp;Please enter the expiry date",
                    minlength: "<br/>&nbsp;&nbsp;&nbsp;&nbsp;Please enter as MMYY",
                    maxlength: "<br/>&nbsp;&nbsp;&nbsp;&nbsp;Please enter as MMYY",
                    digits: "<br/>&nbsp;&nbsp;&nbsp;&nbsp;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验证:避免在某些条件下进行验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！