Problem using validate plugin with hidden elements

I have a form with a select that is contained in a tr which is hidden when the select is is not required to be populated. I am trying to tell validate to only validate the select when that tr is not hidden (display:none)

To be more specific the first field on the form is to select country, then the second select is to choose state, but it is only displayed if the selected country has states.

The validation on the first select works fine.

I have tried this but it doesn't wurk- as in the form will not submit when only the visible fields are populated.

$("form[name=form]").validate({
       rules: {
            ShipCountry: {
                required: true
            },
            ShipState_dropdown: {
                required: "tr#ShipState_Row:visible"
            },
            ShipPostalCode: {
                required: true
            }

        },
        messages: {
        ShipPostalCode: {
                required: jQuery.format("Required")
            },
             ShipState_dropdown: {
                required: jQuery.format("Required"),
            },
             ShipCountry: {
                required: jQuery.format("Required"),
            }
        },
   submitHandler: function(form){
             form.submit();
       },
        success: function(label) {
            // set as text for IE
            label.html("<span style='color:white'>.</span>").addClass("checked");
        },
        onkeyup: false
    });

Here is the html(relevent section only)

<form onsubmit="if (typeof(Update_Hidden_State_Fields)=='function') Update_Hidden_State_Fields(); if (this.submitted) return false; else {this.submitted=true; return true;}" action="ShoppingCart.asp" name="form" method="post">
<table id="v65-cart-shipping-details-wrapper" cellspacing="0" cellpadding="0" border="0">

<tbody>

<tr>

<td>

<font style="line-height:22px;">

<table id="v65-cart-shipping-details" cellspacing="1" cellpadding="0" border="0">

<tbody>

<tr>

<td class="carttext colors_text" align="right">Country:</td>

<td class="v65-cart-shipping-details-input-cell">

<select id="ShipCountry" style="background-color: rgb(255, 255, 255);" onchange="v1makeSel(this);this.style.backgroundColor='#ffffff';if(window['RecalcShippingAddress']){RecalcShippingAddress(this);}" name="ShipCountry">

</td>

</tr>

<tr id="ShipState_Row" style="display: none;">

<td class="carttext colors_text" align="right">

<td class="v65-cart-shipping-details-input-cell">

<input id="ShipState_Required" type="hidden" value="" name="ShipState_Required">

<span id="span_v1state_dropdown" style="display: none;">

<select id="ShipState_dropdown" style="" onchange="document.getElementById('ShipState').value=this.value;this.style.backgroundColor='#ffffff';if(window['RecalcShippingAddress']){RecalcShippingAddress(this);}" name="ShipState_dropdown">

</span>

<span id="span_v1state_textbox" style="display:none">

<script type="text/javascript">

<script type="text/javascript">

</td>

</tr>

<tr>

<tr>

<tr id="v65-cart-shippingoptionsbuttonrow">

</tbody>

</table>

<script type="text/javascript">

</td>

</tr>

</tbody>

</table>

</td>

<td class="v65-cart-details-cell v65-cart-details-lastcell table-border-right" width="0"></td>

</tr>

<tr class="v65-cart-tax-row">

<tr class="v65-cart-total-estimate-row">

<tr>

<tr id="v65-cart-footer-row">

</tbody>

</table>
</form>

Topic Participants
barbara.mclennan
kbwood.au

Problem using validate plugin with hidden elements

Problem using validate plugin with hidden elements

Topic Participants

barbara.mclennan

kbwood.au