Усовершенствованная проверка JQuery: предотвращение проверок при определенных условиях

Question

Я создаю форму, для которой я использую удивительный плагин проверки 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>&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>

И мой длинный метод проверки:

$(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"
                }
            }
        });
    });

Любая помощь будет принята с благодарностью!

Answer 1

Плагин проверки позволяет это сделать, для обязательного атрибута вы не ограничены true / false, вы можете сделать это в своих правилах:

CCNumber:{      
    required: "#<%=CreditCard.ClientID %>:visible",
    creditcard: "#<%=CreditCard.ClientID %>:visible"
}

Кроме того, вы можете сократить другой синтаксис в onload, если вы по каким-либо причинам не ограничены:

$(function() {
    $("#<%=Cheque.ClientID %>").hide();
    $("#<%=CreditCard.ClientID %>").hide();
});

Тем не менее, я бы предложил применить к ним «скрытый» стиль css, чтобы избежать возможного мерцания, а затем просто использовать синтаксис $("#<%=Cheque.ClientID %>").show();, чтобы показать их, когда бы вы ни запускали его. Какой бы метод вы ни использовали, тогда: видимый селектор будет работать, он действует точно так же, как и звучит.