JQUERY - как я могу проверить/проверить свои флажки/радио в моей структуре кода?

Question

Я делаю это намного хуже и сложнее, чем должно быть, но я не могу понять это.

мне нужно пользовательские проверки кодирование для специального клиентского приложения мы работаем, поэтому не может использовать JQuery плагина VAL

Все, что я хочу, является функцией флажка и проверки радио построено в основном таким же, как у меня есть для проверки правильности текстового поля. Мой код для проверки флажка и проверки радио настолько плох, что он сломал исходную рабочую проверку текста.

Я лишил неисправимый код ошибки, которая у меня была - может ли кто-нибудь показать мне, как это работает?

Использование структуры кода в моем jsfiddle/ниже: при нажатии кнопки «btnCatchReqFlds» я хочу, чтобы он запускал проверку текстового поля, а затем установил флажок, проверил радио и отобразил все те поля, которые требуются, но не заполненные/проверить/выбран.

Посмотрите на jsfiddle, и вы увидите, как он работает только с проверкой текстового поля. Мне просто нужно включить те же функции/check с флажками/переключателями.

Я думаю, что я рядом, ближе. Я обновил код, и я знаю, что это не очень хорошее кодирование, но, принимая его в детские шаги, чтобы получить то, что мне нужно. Теперь приведенный ниже код проверяет наличие нужного, но пустого текста и полей проверки/радио. Проблема в том, что код захватывает правильные поля, но «.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, что это не так. .notnot возвращает логическое значение, оно возвращает объект jQuery, содержащий элементы, которые не соответствуют селектору.

Вы должны просто использовать:

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

, чтобы определить, если что-то не проверяется. Или еще лучше:

!this.checked 

Обновлено скрипку:http://jsfiddle.net/VSx6M/

---

Некоторые другие примечания:

• У вас есть два return заявления в конце обработчика событий. Второй из них недоступен, потому что return возвращает программу обратно к вызывающей функции немедленно.
• Array literal ([]) обозначение предпочтительнее, чем new Array.
• Радио-кнопки проверяются несколько раз, потому что вы не учитываете группы кнопок. Это приводит к тому, что радиокнопки будут помечены как недопустимые, поскольку все они отмечены как обязательные.

^{* Я знаю, что вы не можете использовать проверку jQuery, но я очень рекомендую попробовать.}