JQuery 유효성 검사기 사용자 정의 오류 배치가 작동하지 않습니다.

Question

@TrueBlueAussie의 도움으로 맞춤 이미지를 사용하여 확인란을 만들었습니다. 나는 이제 사용자 정의 확인란 이후에 유효성 검사 오류 메시지를 표시하는 다음 단계로 넘어갔습니다.

확인란의 숨기기를 취소하면 확인란이 선택되었거나 선택되지 않은 것을 볼 수 있습니다. 또한 유효성 검사 오류가 예상대로 나타납니다. 이 방법이 효과가 있지만 이미지 버튼을 통해 체크 박스를 선택 취소해도 오류 메시지가 제거되지는 않습니다.

또한 체크 박스에 display:none을 다시 추가하면 오류 메시지가 전혀 표시되지 않습니다. 내 코드에 어떤 문제가 있습니까?

문제를 표시하기 위해 FIDDLE here을 만들었습니다. 증상을 보려면 체크 박스에서 display:none을 제거하십시오.

HTML :

<input type="checkbox" id="AcceptTerms_check" name="AcceptTerms_check" style="display:none;"> 
<img class="chk-img" id="AcceptTerms" src="../../../wp-content/uploads/misc/notselected.png"> 
<span id="ts-cs-accept">I have read and accept the Terms and Conditions.</span> 

의 jQuery 검증 코드 : 기본적으로 숨겨진 요소가 검증에서 제외되기 때문에

jQuery("#InstallerForm").validate({ 
    rules: { 
     InstBizNam: { 
      required: true 
     }, 
     AcceptTerms_check: { 
      required: true 
     } 
    }, 
    messages: { 
     InstBizNam: "Please enter business name", 
     AcceptTerms_check: "Please read and accept the program terms to submit your application" 
    }, 
    errorPlacement: function (error, element) { 
     if (element.attr("name") == "AcceptTerms_check") { 
      error.insertAfter("#ts-cs-accept"); 
     } else { 
      error.insertAfter(element); 
     } 
    }, 
    submitHandler: function (form) { 
     alert("SUBMITTED!"); 
    } 
}); 

Answer 1

즉. ignore 옵션에 맞춤식 선택기를 전달하여 기본 설정을 재정의 할 수 있습니다.

jQuery(document).ready(function() { 
 
    jQuery("#InstallerForm").submit(function(event) { 
 
    event.preventDefault(); 
 
    return false; 
 
    }); 
 

 
    jQuery('.chk-img').click(function(e) { 
 
    var element = jQuery(this); 
 
    var $checkbox = jQuery('input:checkbox[name=' + this.id + '_check]'); 
 
    if ($checkbox.prop("checked")) { 
 
     $checkbox.prop('checked', false); 
 
     jQuery(element).attr("src", "//placehold.it/24/ff0000"); 
 
    } else { 
 
     $checkbox.prop('checked', true); 
 
     jQuery(element).attr("src", "//placehold.it/24/00ff00"); 
 
    } 
 
    $checkbox.valid() 
 
    }); 
 

 
    jQuery("#InstallerForm").validate({ 
 
    ignore: ':hidden:not(#AcceptTerms_check)', 
 
    rules: { 
 
     InstBizNam: { 
 
     required: true 
 
     }, 
 
     AcceptTerms_check: { 
 
     required: true 
 
     } 
 
    }, 
 
    messages: { 
 
     InstBizNam: "Please enter business name", 
 
     AcceptTerms_check: "<br/>Please read and accept the program terms to submit your application" 
 
    }, 
 
    errorPlacement: function(error, element) { 
 
     if (element.attr("name") == "AcceptTerms_check") { 
 
     error.insertAfter("#ts-cs-accept"); 
 
     } else { 
 
     error.insertAfter(element); 
 
     } 
 
    }, 
 
    submitHandler: function(form) { 
 
     alert("SUBMITTED!"); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.11.1/jquery.validate.min.js"></script> 
 
<form id="InstallerForm" name="InstallerForm" action="" method="get"> 
 
    <fieldset> 
 
    <label for="InstBizNam">Business Name*:</label> 
 
    <input name="InstBizNam" id="InstBizNam" type="text" class="input-text" tabindex="5" placeholder="Business Name" /> 
 
    <br/> 
 
    <br/> 
 
    <input type="checkbox" id="AcceptTerms_check" name="AcceptTerms_check" style="display:none;" /> 
 
    <img class="chk-img" id="AcceptTerms" src="//placehold.it/24/ff0000" /> <span id="ts-cs-accept">Accept Terms</span> 
 

 
    <br/> 
 
    <br/> 
 
    <input name="submit" type="submit" value="Submit Application" /> 
 
    </fieldset> 
 
</form>

위의 경우

우리가 #AcceptTerms_check 이외의 모든 숨겨진 요소를 무시하는

.