Question

I’m making a form that I’m using the amazing JQuery validation plugin for (http://docs.jquery.com/Plugins/Validation/).

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.

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>

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

Any help would be greatly appreciated!

Answer 1

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"
}

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

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.