JQUERY - 코드 구조에서 내 체크 박스/라디오를 확인/확인하려면 어떻게합니까?

Question

나는 이것을 훨씬 더 어렵게 만들고있다. 그러나 나는 이것을 이해할 수 없다.

나는, 그래서 내가 원하는 건 내가 가진 것과 같은 기본적으로 내장 된 체크 박스와 라디오 검증 기능입니다

를 JQuery와 발 플러그인을 사용할 수 없습니다 우리가 작업하는 특별한 클라이언트 응용 프로그램에 대한 일부 사용자 지정 유효성 검사 코드가 필요합니다 텍스트 필드 유효성 검사. 어떤 방법이 작동하는 방법 보여주세요 수 - 체크 박스와 라디오 검증에 대한 나의 코드는

나는 내가 가진 비 작동 코드 재앙을 제거 한 원래 작업 텍스트 필드 유효성 검사를 부러 그렇게 나쁜?

내 jsfiddle/below 코드 구조를 사용하여 : "btnCatchReqFlds"단추를 클릭하면 텍스트 필드 검사를 실행 한 다음 확인란을 선택하고 라디오 검사를 수행하여 필요한 모든 필드를 표시합니다. 채워/체크/선택.

jsfiddle을 보면 텍스트 필드 유효성 검사와 함께 작동하는 방식을 확인할 수 있습니다. 난 그냥 체크 박스/라디오 버튼과 동일한 기능/체크를 통합해야합니다.

은 내가 잘 가까이, 가까이 나는 생각한다. 코드를 업데이트했는데 이것이 훌륭한 코딩이 아니라는 것을 알고 있지만 필요한 것을 얻기 위해 아기 단계로 가져갑니다. 아래의 코드는 필수이지만 빈 텍스트와 체크/라디오 필드를 확인합니다. 이제 문제는 코드가 올바른 필드를 가져 오지만 ".not (': checked');" 제대로 작동하지 않습니다. 라디오/체크 박스 중 하나를 선택하면 동일한 반환 값이 표시됩니다. 나는 무엇이 잘못하고있는 중이 야 : return $(this).not(':checked');

my jsfiddle :

JQuery와 :

$("#btnCatchReqFlds").on('click', function() 
{ 
    $("#holdErrMsg").empty(); 
    $("#holdErrMsg_checkRadios").empty(); 
    var requiredButEmpty = $("fieldset:visible").find('input[class*="-required"], select[class*="-required"]').filter(function() 
      { 
       return $.trim($(this).val()) === ""; 
      }); 
    var chk_requiredButEmpty = $("fieldset:visible").find(":input:checkbox[class*='-required'],:input:radio[class*='-required']").filter(function() 
      { 
       return $(this).not(':checked'); 
      }); 
    if (requiredButEmpty.length) 
     { 
      requiredButEmpty.each(function() 
       { 
        $("#holdErrMsg").append("Please fill in the " + this.name + "<br />"); 
       }); 
     } 
    if (chk_requiredButEmpty.length) 
    { 
     chk_requiredButEmpty.each(function() 
      { 
       $("#holdErrMsg_checkRadios").append("Please fill in the " + this.name + "<br />"); 
      }); 
    } 
    return !requiredButEmpty.length; 
    return !chk_requiredButEmpty.length; 
}); 

HTML :

<form method="post" action=""> 
    <div id="holdErrMsg"></div> 
    <div id="holdErrMsg_checkRadios"></div> 
    <fieldset id="mainSection" name="mainSection"> 
     <legend style="color:blue; font-weight:bold">Project Overview Section</legend> 
     <table style="width: 100%"> 
      <tr> 
       <td style="height: 33px; width: 178px;">Name<span style="color: red">*</span></td> 
       <td style="height: 33px"><input id="1125" name="1125" class="1125-required" type="text" /> - 1125</td> 
      </tr> 
      <tr> 
       <td style="height: 33px; width: 178px;">Email<span style="color: red">*</span></td> 
       <td style="height: 33px"><input id="1026" name="1026" class="1026-required" type="text" /> - 1126</td> 
      </tr> 
      <tr> 
       <td style="width: 178px">Product Title</td> 
       <td><input id="1089" name="1089" type="text" /></td> 
      </tr> 
      <tr> 
       <td style="width: 178px">Product Type</td> 
       <td> 
        <select id="1169" name="1169"> 
         <option value="">Select</option> 
         <option value="Cars">Cars</option> 
         <option value="Boats">Boats</option> 
         <option value="Planes">Planes</option> 
        </select> 
       </td> 
      </tr> 
      <tr> 
       <td> 
        <button id="btnCatchReqFlds" type="button" name="btn">Check Required Fields</button> 
       </td> 
      </tr> 
     </table> 
    </fieldset> 
    <!-- Car Section --> 
    <fieldset id="section-11" name="section-11"> 
     <legend style="color:fuchsia; font-weight:bold">Car Details Section</legend> 
     <table cellpadding="2" style="width: 100%"> 
      <tr> 
       <td style="width: 334px; height: 35px"><label>Size:<span style="color: red">*</span></label></td> 
       <td style="height: 35px"><input id="1245" class="1245-required" name="1245" type="text" /> - 1245</td> 
      </tr> 
      <tr> 
       <td style="height: 35px; width: 334px">Color:<span style="color: red">*</span></td> 
       <td style="height: 35px"> 
        <select id="1433" class="1433-required" name="1433"> 
         <option value="">Select</option> 
         <option value="Orange">Orange</option> 
         <option value="Blank">Blank</option> 
         <option value="Green">Green</option> 
        </select> 
        - 1433 
       </td> 
      </tr> 
      <tr> 
       <td style="width: 334px">Description:</td> 
       <td> 
        <textarea id="1290" name="1290" rows="2" style="width: 433px"></textarea> 
       </td> 
      </tr> 
     </table> 
    </fieldset> 
    <!-- Plane Section --> 
    <fieldset id="section-12" name="section-12"> 
     <legend style="color:fuchsia; font-weight:bold">Plane Details Section</legend> 
     <table cellpadding="2" style="width: 100%"> 
      <tr> 
       <td style="width: 334px; height: 35px"><label>Size:</label></td> 
       <td style="height: 35px"><input id="1245" name="1245" type="text" /></td> 
      </tr> 
      <tr> 
       <td style="height: 35px; width: 334px">Color<span style="color: red">*</span>:</td> 
       <td style="height: 35px"> 
        <input type="checkbox" name="1433[]" id="1433[]" value"Orange" class="1433[]-required" />Orange 
        <input type="checkbox" name="1433[]" id="1433[]" value"Blue" class="1433[]-required" />Blue 
        <input type="checkbox" name="1433[]" id="1433[]" value"Green" class="1433[]-required" />Green 
        | 1302 
       </td> 
      </tr> 
      <tr> 
       <td style="width: 334px">Description:</td> 
       <td> 
        <textarea id="1290" name="1290" rows="2" style="width: 433px"></textarea> 
       </td> 
      </tr> 
     </table> 
    </fieldset> 
    <!-- Boat Section --> 
    <fieldset id="section-13" name="section-13"> 
     <legend style="color:fuchsia; font-weight:bold">Boat Details Section</legend> 
     <table cellpadding="2" style="width: 100%"> 
      <tr> 
       <td style="width: 334px; height: 35px"><label>Size:</label></td> 
       <td style="height: 35px"><input id="1245" name="1245" type="text" /></td> 
      </tr> 
      <tr> 
       <td style="height: 35px; width: 334px">Color:<span style="color: red">*</span></td> 
       <td style="height: 35px"> 
        <input type="radio" name="1834" id="1834" value="None" class="valuetext 1834-required" />None 
        <input type="radio" name="1834" id="1834" value="All" class="valuetext 1834-required" />All 
        - 1834 
       </td> 
      </tr> 
      <tr> 
       <td style="width: 334px">Description:</td> 
       <td> 
        <textarea id="1290" name="1290" rows="2" style="width: 433px"></textarea> 
       </td> 
      </tr> 
     </table> 
    </fieldset> 
    <br /> 
    <!-- Misc. Info Section --> 
    <fieldset id="section-1011" name="section-1011"> 
     <legend style="color:green; font-weight:bold">Misc. Info Section</legend> 
     <table cellpadding="2" style="width: 100%"> 
      <tr> 
       <td style="width: 334px; height: 35px"><label>Size:</label></td> 
       <td style="height: 35px"><input id="1301" name="1301" type="text" /></td> 
      </tr> 
      <tr> 
       <td style="height: 35px; width: 334px">Color:</td> 
       <td style="height: 35px"> 
        <select id="1302" name="1302"> 
         <option value="Orange">Orange</option> 
         <option value="Blank">Blank</option> 
         <option value="Green">Green</option> 
        </select> 
       </td> 
      </tr> 
      <tr> 
       <td style="width: 334px">Description:</td> 
       <td> 
        <textarea id="1303" name="1303" rows="2" style="width: 433px"></textarea> 
       </td> 
      </tr> 
     </table> 
    </fieldset> 
</form> 

Answer 1

최근 업데이트로 형제가 모두 선택되었는지 확인한 다음 변수로 반환되는 요소 배열 중 하나를 선택하십시오. 오류 메시지를 추가하기 전에 아래 코드를 삽입하면 원하는 방식으로 작동합니다. 나는이 잘못하고있는 중이 야 무엇을 Heres 업데이트 된 바이올린 http://jsfiddle.net/mPXAw/7/

var chk_requiredButEmpty = $("fieldset:visible").find(":checkbox[class*='-required'],:radio[class*='-required']").filter(function() 
{ 
     if(!$(this).siblings().is(':checked')){ 
       return !$(this).is(':checked'); 
     } 
}); 
chk_requiredButEmpty = chk_requiredButEmpty.eq(0); 

Answer 2

: return $(this).not(':checked');

당신은 .not을 가정하고 사실이 아니다 .is의 역이다. .not은 이 아니며은 부울 값을 반환하고 선택기와 일치하지 않는 요소가 포함 된 jQuery 객체를 반환합니다.

당신은 단순히 사용해야합니다 뭔가를 선택하지 않은 경우

!$(this).is(":checked") 

확인할 수 있습니다. 또는 더 나은 :

!this.checked 

업데이트 바이올린 :http://jsfiddle.net/VSx6M/

---

일부 다른 노트 :

• 당신은 당신의 이벤트 핸들러의 끝에 두 return 문이있다. return은 프로그램 흐름을 호출 함수로 즉시 반환하기 때문에 두 번째 호출은 도달 할 수 없습니다.
• 배열 리터럴 ([]) 표기가 new Array보다 선호됩니다.
• 라디오 단추 그룹을 고려하지 않으므로 라디오 단추를 여러 번 유효성을 검사하고 있습니다. 이로 인해 라디오 버튼이 모두 필수로 표시되어 무효로 표시됩니다.

^{는 * 당신이 jQuery를 유효성을 검사 사용할 수 없습니다 알고 있지만, 내가보기 엔에 시도하는 것이 좋습니다.}