특정 확인란을 확인한 경우 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>

이 예에서는 "계정 삭제 삭제"가 확인되었으며, 이는 "show"를 확인했습니다.

<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'}}, 그러나이 경우 우리는 표준 참 또는 거짓 대신에 참조를 넣었습니다. #checkboxid:checked . 확인하면 다시 반환됩니다 'true' 그리고 필드가 필요 해지고 돌아 오면 'false' 필드는 필요하지 않습니다.

유용한 또 다른 것은 누군가가 각 확인란의 클래스 속성에 다음을 추가하여 양식의 시작 부분에서 요청 유형을 선택하도록하는 것입니다.

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

하나 이상의 확인란이 필요하면 선택한 경우 최소 길이에 추가하십시오.

Answer 2

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>