campo obligatorio dentro de un acordeón jquery

Question

Formulario básico que utiliza un acordeón JQuery e intenta validar los campos obligatorios. ¿Me estoy perdiendo algo simple? ¡Gracias!

javascript:

<script type="text/javascript" language="javascript"> 
    $(document).ready(function() { 
     $("#accordion").accordion(); 
     $("#Form1").validate({ 
      rules: { 
       AccordionField: { required: true } 
      } 
     }); 
    });  
</script> 

html:

<form id="Form1" action="foo.htm"> 
    <div id="accordion"> 
    <h3><a href="#">Section 1</a></h3> 
    <div><p>content</p></div> 
    <h3><a href="#">Section 2</a></h3> 
    <div><p><input id="AccordionField" class="required" /></p></div> 
    </div> 
    <p><button type="submit">Submit</button></p> 
</form> 

Problema: Si la segunda sección se derrumbó durante la presente, la validación no valida el campo requerido.

Answer 1

jQuery validate (1.9) ignora los campos ocultos de forma predeterminada. Puede anular este comportamiento usando la opción ignore:

$(document).ready(function() { 
    $("#accordion").accordion(); 
    $("#Form1").validate({ 
     rules: { 
      AccordionField: { 
       required: true 
      } 
     }, 
     ignore: [] 
    }); 
});​ 

Ejemplo:http://jsfiddle.net/andrewwhitaker/VWWkP/