2010-05-19 17 views
14

Ho un semplice modulo html che ho aggiunto la convalida all'utilizzo del plug-in JQuery Validation. Lo faccio funzionare per singoli campi che richiedono un valore. Ora ho bisogno di estenderlo in modo che se un utente risponde Sì a una domanda, deve inserire qualcosa nel campo Dettagli, altrimenti il ​​campo Dettagli può essere lasciato vuoto. Sto usando i pulsanti radio per visualizzare Sì/No. Ecco il mio modulo HTML completo - non sono sicuro dove andare da qui:utilizzando il plugin di convalida JQuery

<script type="text/javascript" charset="utf-8"> 
    $.metadata.setType("attr", "validate"); 
    $(document).ready(function() { 
    $("#editRecord").validate(); 
    }); 
    </script> 

    <style type="text/css"> 
    .block { display: block; } 
    form.cmxform label.error { display: none; } 
    </style> 

    </head> 
    <body> 

      <div id="header"> 
       <h1> 
        Questions</h1> 
      </div> 
      <div id="content"> 
       <h1> 
        Questions Page 1 
       </h1> 
      </div> 
    <div id="content"> 
       <h1> 
       </h1> 
       <form class="cmxform" method="post" action="editrecord.php"  id="editRecord"> 
       <input type="hidden" name="-action" value="edit"> 
        <h1> 
        Questions     
        </h1> 

      <table width="46%" class="record"> 
      <tr> 
      <td width="21%" valign="top" class="field_name_left"><p>Question 1</p></td> 
      <td width="15%" valign="top" class="field_data"> 
      <label for="Yes"> 
      <input type="radio" name="Question1" value="Yes" validate = "required:true" /> Yes 
      </label> 
      <label for="No"> 
    <input type="radio" name="Question1" value="No" /> No 
      </label> 
      <label for="Question1" class="error">You must answer this question to proceed</label> 
      </td> 
      <td width="64%" valign="top" class="field_data"><strong>Details:</strong> 
      <textarea id = "Details1" class="where" name="Details1" cols="25" rows="2"></textarea></td> 
      </tr> 
    <tr> 
      <td valign="top" class="field_name_left">Question 2</td> 
<td valign="top" class="field_data"> 
    <label for="Yes"> 
      <input type="radio" name="Question2" value="Yes" validate = "required:true" /> Yes 
      </label> 
      <label for="No"> 
    <input type="radio" name="Question2" value="No" /> No 
      </label> 
      <label for="Question2" class="error">You must answer this question to proceed</label> 
     </td> 
    <td valign="top" class="field_data"><strong>Details:</strong> 
       <textarea id = "Details2" class="where" name="Details2" cols="25" rows="2"></textarea>   </td> 
    </tr> 
      <tr class="submit_btn"> 
          <td colspan="3"> 
           <input type="submit" name="-edit" value="Finish"> 
           <input type="reset" name="reset" value="Reset">   </td> 
      </tr> 
      </table> 
     </form> 
    </div> 
    </body> 
    </html> 

risposta

19

Sulle vostre <textarea> elementi, aggiungere un dependency expression per required, ad esempio per la domanda 1, fare questo:

validate="required:'input[name=Question1][value=Yes]:checked'" 

Questo dice che se $('input[name=Question1][value=Yes]:checked').length > 0 allora il campo è obbligatorio, quindi, se sì è selezionata, è necessario :)

You can see a working demo here

+0

Grazie per la risposta. Ho aggiunto il codice negli elementi