JQuery驗證表單輸入，如果某些複選框被檢查

Question

我有一個多形式，在一開始需要用戶的基本信息與某些jquery.validate錯誤檢查，看看是否領域已填寫和電子郵件地址是有效的。

下面有新帳戶的一系列複選框（type_of_request），刪除帳戶，新的軟件等，這顯示/隱藏的表單元素，因爲他們選中/取消。

我想驗證只有在corressponding 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.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'}}" 

然後將「刪除賬戶」字段集看起來像這樣.....

<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="{required:'true', minlength:1, messages:{required:'Please select a checkbox'}}" 

的。如果你需要不止一個選中複選框，然後添加到最小長度。

Answer 2

假設您使用的是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>