Условная валидация с использованием плагина JQuery Validation - PullRequest
Новая
       12

Условная валидация с использованием плагина JQuery Validation

14 голосов
/ 19 мая 2010

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

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

Ответы [ 3 ]

19 голосов
/ 19 мая 2010

На ваших <textarea> элементах добавьте выражение зависимости для required, например, для вопроса 1: 

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

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

Рабочее демо можно посмотреть здесь

15 голосов
/ 19 мая 2010

Вы можете сделать что-то вроде этого: 

$("#editRecord").validate({
    rules: {
        'Details1': {
            required: function() {
                return $('input[name=Question1]').val() == 'yes';
            }
        }
        'Details2': {
            required: function() {
                return $('input[name=Question2]').val() == 'yes';
            }
        }
    }
});
0 голосов
/ 03 ноября 2015

В ответ на предложенный выше ответ Ника Крейвера я нашел правильный синтаксис:

класс = "проверить [требуется] [имя = Question1] [значение = Да]: проверено"

вместо того, что он написал.

Спасибо, что поставили меня на правильный путь!

...