如果选中某些复选框，则 jquery 验证表单输入

Posted 2023-05-09

【中文标题】如果选中某些复选框，则 jquery 验证表单输入

【英文标题】：jquery validate form input if certain check boxes are checked

【发布时间】：2010-09-22 18:58:58

【问题描述】：

我有一个多部分表单，它在开头使用一些 jquery.validate 错误检查来获取基本用户信息，以查看字段是否已填写并且电子邮件地址是否有效。

下面有一系列复选框 (type_of_request) 用于新帐户、删除帐户、新软件等，它们在选中/取消选中时显示/隐藏这些表单元素。

只有当相应的 type_of_request 项目已被选中时，我才想验证表单上所需的部分。

---

更新信息

---

这是一个很好的解决方案，但似乎需要选定部分的所有子项。

典型的场景是 type_request 中的 email 和其他复选框都被选中：

   <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 网站上进行了描述，但它不起作用。我是否需要更改语法才能使其正常工作？

【参考方案1】：

假设您使用的是 jQuery validation plugin，您可以根据单击的复选框设置/清除必需/非必需部分中每个控件的类。

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

【讨论】：

不知道为什么语法高亮似乎不适用于所有这些。

谢谢，这有点偏离我的需要，所以我更新了原始问题以尝试更清楚一点。

@tvanfosson：“语法高亮似乎不起作用” - 因为您从 javascript 开始， / 使它认为它正在做一个正则表达式。

【参考方案2】：

我最终采用的解决方案是从 http://bassistance.de/jquery-plugins/jquery-plugin-validation/ 链接 jquery.validate.js 和 jquery.metadata.js

然后我在表单顶部有一个请求类型检查列表，当您检查项目时显示/隐藏 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'"

“删除帐户”字段集如下所示.....

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

类中的“必需”值通常适用于真或假，即required:'true', messages:required:'This field is required'，但在这种情况下，我们在其中放置一个引用而不是标准的真或假#checkboxid:checked。如果选中，则返回为'true'，并且该字段成为必填字段，如果返回'false'，则不需要该字段。

我发现另一件有用的事情是通过在每个复选框的 class 属性中添加以下内容来确保有人在表单的开头选择了请求类型

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

如果您需要多于一个复选框，则只需添加到最小长度。