하나 이상의 radiobutton 값이 true인지 확인하는 jQuery 유효화

Question

두 가지 질문이있는 양식이 있습니다. 첫 번째 질문은 제품 가치가 고정 금액보다 큰지 묻고 두 번째 질문은 제품 가치가 고정 금액보다 적은지 묻습니다. 사용자가 양식을 제출하려고 할 때 양식이 유효성을 검증 받아 적어도 하나의 질문에 yes로 응답했는지 확인해야합니다. 두 질문에 모두 답이없는 경우 양식 유효한 속성 $("#form").valid()이 false 여야하며 오류 메시지가 포함 된 div가 페이지에 표시되어야합니다. jQuery 유효성 검사를 사용하여 어떻게 이것을 수행 할 수 있습니까?

형태의 단순화 된 버전은 내가 노력하고있어

<form id="billing" method="POST"> 
    <div> 
     <label for "billAmountLess">Value is less than 1000</label> 
     <input id="billAmountLessY" name="billAmountLess" type="radio" required value="True"> 
     <label for "billAmountLessY">Yes</label> 
     <input id="billAmountLessN" name="billAmountLess" type="radio" required value="False"> 
     <label for "billAmountLessN">No</label> 
    </div> 
    <div> 
     <label for "billAmountMore">Value exceeds 1000</label> 
     <input id="billAmountMoreY" name="billAmountMore" type="radio" required value="True"> 
     <label for "billAmountMoreY">Yes</label> 
     <input id="billAmountMoreN" name="billAmountMore" type="radio" required value="False"> 
     <label for "billAmountMoreN">No</label> 
    </div> 
    <div id="errorDiv" style="display:none">Error!!!! 
    </div> 
    <div> 
     <input type="submit" value="Submit"> 
    </div> 
</form> 

JQuery와 유효성 검사 같은 것을

$('#billing').validate({ 
    rules: { 
     billAmountMore: { 
      equalTo: { 
       param: '#billAmountMoreY', 
       depends: function(element) { 
        $("errorDiv").show(); 
        return $("#input[name='billAmountLess']:checked").val() == "false"; 
       } 
      } 
     } 
    } 
}); 

제작 한

이것에 대한 jsfiddle이다 보인다.

Answer 1

당신은 라디오 버튼 값을 검색하려면이 코드

function validate(){ 
     console.log($("input[name='billAmountLess']:checked").val()); 
     console.log($("input[name='billAmountMore']:checked").val()); 
    } 

를 사용할 수 있습니다. 코드에서

이 라인 :이 요소의 '아이디'를 나타내는 것으로

return $("#input[name='billAmountLess']:checked").val() == "false"; 

는 '입력'앞에 "#"을 제거해야합니다. 어쩌면 그것이 작동하지 않는 이유 일 수 있습니다.

Answer 2

간단한 사용자 정의 유효성 검사 기능에서이 작업을 수행 할 수 있습니다. 양식 태그를 업데이트 - 그럼

<form id="billing" onsubmit="return validate();" method="POST"> 

-

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script type="text/javascript"> 
    function validate(){ 
    var billLess = $("input[name='billAmountLess']:checked").val(); 
    var billMore = $("input[name='billAmountMore']:checked").val(); 
    if(billLess == "False" && billMore == "False"){ 
     $("#errorDiv").show(); 
     return false; 
    } 
    else{ 
     return true; 
    } 
    } 
</script>