JQuery проверить форму ввода, если установлены определенные флажки

Question

У меня есть многочастная форма, которая вначале берет основную информацию о пользователе с некоторой проверкой ошибок jquery.validate, чтобы увидеть, были ли заполнены поля и действителен ли адрес электронной почты.

Ниже есть ряд флажков (type_of_request) для новых учетных записей, удаления учетных записей, нового программного обеспечения и т. Д., Которые показывают / скрывают эти элементы формы, когда они отмечены / не отмечены.

Я хотел бы проверить необходимые разделы в форме, ТОЛЬКО если был проверен соответствующий элемент type_of_request.

---

Обновление информации

---

Это отличное решение, но, похоже, все дочерние элементы выбранного раздела требуются.

Типичным сценарием будет как электронная почта, так и установлен флажок type_request:

   <div id="email" style="display: block;"> // shown because other has been selected in the type request
     <input id="email_new_account" class="sq-form-field" type="checkbox" value="0" name="q4836:q1"/> // not required
     <input id="email_new_account_name" class="sq-form-field" type="text" name="q4836:q2"/> // if email_new_account checked then make required
     <input id="email_new_account_access" class="sq-form-field" type="text" name="q4836:q2"/> // if email_new_account checked then make required
     <input id="email_new_account_manager" class="sq-form-field" type="text" name="q4836:q3"/> // if email_new_account checked then make required

     <input id="email_add_remove_access" class="sq-form-field" type="checkbox" value="0" name="q4837:q1"/> // not required
     <input id="email_add_remove_account_name" class="sq-form-field" type="text" name="q4837:q2"/> // if email_add_remove_access checked then make required
     <input id="email_add_access" class="sq-form-field" type="text" name="q4836:q2"/> // if email_add_remove_access checked then make required
     <input id="email_remove_access" class="sq-form-field" type="text" name="q4837:q3"/> // if email_add_remove_access checked then make required
   </div>
   <div id="other" style="display: block;"> // shown because other has been selected in the type request
     <input id="other_describe_request" class="sq-form-field" type="text" name="q4838:q1"/> // required because #other was checked in type request
     <input id="other_request_justification" class="sq-form-field" type="text" name="q48387:q2"/> // required because #other was checked in type request
   </div>

---

Дальнейшее чтение

---

Я рассмотрел это еще дальше и обнаружил, что к классу элементов ввода можно добавить следующее

class="{required:true, messages:{required:'Please enter 
your email address'}}"

или

class="{required:true, email:true, messages:{required:'Please enter 
your email address', email:'Please enter a valid email address'}}"

но когда я добавляю

class="{required:'input[@name=other]:checked'}" 

, который был описан на сайте http://jquery.bassistance.de, не работает. Нужно ли менять синтаксис, чтобы это работало?

Answer 1

Предполагая, что вы используете плагин проверки jQuery , вы можете установить / очистить класс каждого из элементов управления в обязательных / не обязательных разделах, основываясь на установленном флажке.

$(document).ready( function() { $('form').validate(); } );

function init_validation(divName)
{
    $('div#' + divName).find('input').addClass( 'required' );
    $('div#inputs').children('div:not(#' + divName + ')')
                  .find('input')
                  .removeClass( 'required' );
}

HTML:

<form>
<div>
  <input type='radio'
         id='new_account_radio'
         name='interface_selector'
         value='new_account'
         selected=true
         onclick='init_validation("new_account");' /> New Account

  <input type='radio'
         id='delete_account_radio'
         name='interface_selector'
         value='delete_account'
         onclick='init_validation("delete_account");' /> Delete Account

  <input type='radio'
         id='new_software_radio'
         name='interface_selector'
         value='new_software'
         onclick='init_validation("new_software");' /> New Software

</div>

<div id='inputs'>
   <div id='new_account'>
       <input type='text' id='new_account_name' class='required' />
   </div>

   <div id='delete_account'>
       <input type='text' id='delete_account_name' />
   </div>

   <div id='new_software'>
       <input type='text' id='new_software_name' />
   </div>
</div>
</form>

Answer 2

Решение, которое я выбрал, заключалось в том, чтобы связать jquery.validate.js и jquery.metadata.js из http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Затем у меня был контрольный список типов запросов в верхней части формы, которые отображают / скрывают элемент id при проверке элемента (функция показа / скрытия не показана).

<fieldset id="request-type">
<legend>Type of Request</legend>
<ul>
<li><input type="checkbox" name="q4838:q1[]" id="q4838_q1_0" value="0"  class="sq-form-field" /><label for="q4838_q1_0">New account</label></li>
<li><input type="checkbox" name="q4838:q1[]" id="q4838_q1_1" value="1"  class="sq-form-field" /><label for="q4838_q1_1">Delete account</label></li>
<li><input type="checkbox" name="q4838:q1[]" id="q4838_q1_2" value="2"  class="sq-form-field" /><label for="q4838_q1_2">Change access/account transfer</label></li>
<li><input type="checkbox" name="q4838:q1[]" id="q4838_q1_3" value="3"  class="sq-form-field" /><label for="q4838_q1_3">Hardware</label></li>
<li><input type="checkbox" name="q4838:q1[]" id="q4838_q1_4" value="4"  class="sq-form-field" /><label for="q4838_q1_4">Software</label></li>
<li><input type="checkbox" name="q4838:q1[]" id="q4838_q1_5" value="5"  class="sq-form-field" /><label for="q4838_q1_5">Email</label></li>
<li><input type="checkbox" name="q4838:q1[]" id="q4838_q1_6" value="6"  class="sq-form-field" /><label for="q4838_q1_6">Other</label></li>
</ul>
</fieldset>

В этом примере мы скажем, что была выбрана опция «Удалить аккаунт», которая «показала бы»

<fieldset id="delete-account" style="display: block;">

Поскольку оба поля ввода в наборе полей являются обязательными, когда установлен флажок удаления учетной записи, я добавил следующее в атрибут класса требуемого ввода.

class="{required:'#checkboxid:checked', messages:{required:'required error message'}}"

Набор полей «delete-account» выглядит следующим образом .....

<fieldset id="delete-account" style="display: block;">
<legend>Delete Account</legend>

<label  for="q4832_q1">Cessation date</label>
<input type="text" name="q4832:q1value[d]" value="" class="{required:'#q4838_q1_1:checked', messages:{required:'Enter Cessation Date'}}" id="q4832:q1value[d]" />

<label  for="q4832_q1">List of assets</label>
<input type="text" name="q4832:q2" value="" class="{required:'#q4838_q1_1:checked', messages:{required:'Enter Cessation Date'}}" id="q4832:q2" />
</fieldset>

«Обязательное» значение в классе обычно работает на true или false, т. Е. {required:'true', messages:{required:'This field is required'}}, но в этом случае мы помещаем туда ссылку вместо стандартного true или false, #checkboxid:checked. Если этот флажок установлен, он возвращается как 'true', и поле становится обязательным, а если оно возвращается 'false', поле не требуется.

Еще одна полезная вещь, которую я нашел, - это убедиться, что кто-то выбрал тип запроса в начале формы, добавив следующее к атрибуту класса на каждом из флажков

class="{required:'true', minlength:1, messages:{required:'Please select a checkbox'}}"

Если вам нужно установить более одного флажка, просто добавьте к минимальной длине.