jQuery 유효성 검사 플러그인 - 드롭 다운 응답을 기반으로 확인란을 선택하십시오.

Question

처음으로 jQuery 유효성 검사 플러그인을 HTML 양식과 함께 사용하고 있습니다. 나는 이것에 대한 평범한 오래된 자바 스크립트를 사용하는 데 익숙해졌지만이 플러그인을 완전히 사랑한다! 어쨌든, 나는 조건부 유효성 검사를하려고 노력 중이다.

시나리오 : 양식에 두 부분으로 된 질문이 있습니다. 첫 번째 부분은 예/아니오 드롭 다운입니다 (필수). 두 번째 부분은 체크 박스 그룹으로, 이전 드롭 다운에서 "예"를 선택한 경우 적어도 하나를 선택해야합니다. 그래서 대조로 쉽고 빠르게 만들기 위해 약간 큰 조사 부분

<div> 
<p><span class="bold large-font">8.</span> Some question to answer Yes or No to...</p> 
<div class="margin-left-fifty"> 
    <select id="Q8" class="Q8" name="Q8"> 
     <option value="" selected></option> 
     <option value="Yes">Yes</option> 
     <option value="No">No</option> 
    </select> 
</div> 
<div class="margin-left-fifty"> 
    <p><span class="underline italic">If Yes,</span> indicate which areas...</p> 
</div> 
<div class="margin-left-eighty"> 
    <input id="Q8yesA" class="Q8yes" name="Q8yesA" type="checkbox" value="Yes" />      
    <label for="Q8yesA"><span class="small-font">a.</span> Option A</label> 
    <br /> 
    <input id="Q8yesB" class="Q8yes" name="Q8yesB" type="checkbox" value="Yes" />            
    <label for="Q8yesB"><span class="small-font">b.</span> Option B</label> 
    <br /> 
    <input id="Q8yesC" class="Q8yes" name="Q8yesC" type="checkbox" value="Yes" />            
    <label for="Q8yesC"><span class="small-font">c.</span> Option C</label> 
    <br /> 
    <input id="Q8yesD" class="Q8yes" name="Q8yesD" type="checkbox" value="Yes" />       
    <label for="Q8yesD"><span class="small-font">d.</span> Other</label> 
    <input name="Q8yesDlist" type="text" maxlength="255" size="50" value="" placeholder="Please list..." />      
</div> 

참고 차라리 배열을 사용하기보다는, 각각의 응답을 개별했다.

내가 확인란을 검증하기 위해 사용하고 코드가 믿고 여기에서 : validation for at least one checkbox

그래서 지금, 내 기능은 다음과 같습니다 : 나는 포장하려고했는데

$(function(){ 

$.validator.addMethod('Q8yes', function (value) { 
return $('.Q8yes:checked').size() > 0; }, 'Please check at least one box for Question 8.'); 

var checkboxes8 = $('.Q8yes'); 
var checkbox_names8 = $.map(checkboxes8, function(e,i) { return $(e).attr("name")}).join(" ");    

$('#survey').validate({ 
groups: { 
    checks8: checkbox_names8 
}, 
rules: { 
    Q8: "required", 
}, 
messages: { 
    Q8: "Please answer Question 8.",        
}, 
errorContainer: $('#errorContainer'), 
errorLabelContainer: $('#errorContainer ul'), 
wrapper: 'li' 
}); 
}); 

If 문에 addMethod를 추가했지만 아직 이해할 수 없습니다. 그것이 올바른 생각인지 확실하지 않습니다.

도움을 주시면 대단히 감사하겠습니다! 감사!

Answer 1

이 작업을 수행하는 데는 몇 가지 방법이 있으며 그 중 하나에 대한 추적 정보가 제공됩니다. 나는 다른 방법을 제안하려고합니다. 먼저 체크 박스를 재구성하여 모두 name 속성이지만 다른 value 속성을 갖도록하는 것이 좋습니다. 그러면 jQuery Validate에서 더 잘 작동합니다. 이것은 당신이 지금 가지고있는 것입니다 :

<input id="Q8yesA" class="Q8yes" name="Q8yesA" type="checkbox" value="Yes" /> 

변경 것과 :

<input id="Q8yesA" class="Q8yes" name="Q8yes" type="checkbox" value="Q8yesA" /> 

이제 실제 jQuery를 유효성 검사 코드. 당신은 내가 제안이 길을한다면 당신은 아마 대신 그냥 다음과 같을 rules을 가질 수 있습니다, 그룹이 필요하지 않습니다 : 나는 required 규칙의 dependency-expression 버전을 사용했습니다

rules: { 
    Q8: "required", 
    Q8yes: { 
     required: '#Q8 option[value="Yes"]:selected' 
    }, 
    Q8yesDlist: { 
     required: '#Q8yesD:checked' 
    } 
} 

.

는 여기 행동에 어떻게 표시되는지를 보여줍니다 : http://jsfiddle.net/ryleyb/fccPf/