2010-05-19 3 views
14

У меня есть простая форма html, в которую я добавил подтверждение использования плагина JQuery Validation. У меня он работает для отдельных полей, для которых требуется значение. Теперь мне нужно расширить это, чтобы, если пользователь отвечает на вопрос «Да», он должен ввести что-то в поле «Сведения», иначе поле «Детали» может быть оставлено пустым. Я использую переключатели для отображения Да/Нет. Вот моя полная форма HTML - Я не уверен, куда идти отсюда:Условная проверка с использованием плагина проверки 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> 

ответ

19

На ваших <textarea> элементов, добавьте dependency expression для required, например, на вопрос 1, сделайте следующее:

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

Это говорит, что если $('input[name=Question1][value=Yes]:checked').length > 0 то поле является обязательным, поэтому, если да проверяется, это требуется :)

You can see a working demo here

+0

Спасибо за ваш ответ. Я добавил код в элементы