3

最初に基本的なユーザー情報を取得するマルチパートフォームがあり、フィールドが入力されているかどうか、および電子メールアドレスが有効かどうかを確認するための 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サイトで説明されていたが、動作しません。これを機能させるには、構文を変更する必要がありますか?

4

2 に答える 2

3

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>
于 2008-11-18T01:40:07.543 に答える
1

私が最終的に行った解決策は、 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'}}"

「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。チェックされている場合はasに戻り'true'、フィールドは必須になり、戻っ'false'た場合はフィールドは不要になります。

私が便利だと思ったもう1つのことは、各チェックボックスのクラス属性に以下を追加して、フォームの先頭で誰かがリクエストタイプを選択したことを確認することでした。

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

複数のチェックボックスを選択する必要がある場合は、minlengthに追加するだけです。

于 2008-11-25T23:44:45.573 に答える