적어도 하나의 체크 박스가 선택되어 있는지 확인하십시오.

Question

저는 작업 지시서를 게시 할 때 직원들이 사용할 양식이 있습니다. 5 개 부서와 함께 "영향을받는 부서"라는 섹션이 있습니다. 양식을 보내기 전에 최소한 1 개의 부서가 체크 아웃되어야합니다. 이 부분은 작동하지만 첫 번째 확인란을 선택하면 오류 메시지가 사라지지만 두 번째 또는 세 번째 확인란을 선택하더라도 오류 메시지가 사라지지 않습니다. 부서가 점검 될 때 오류가 사라지지 않더라도 양식은 예상대로 작동합니다.

확인란을 선택하면 오류가 사라질뿐입니다.

jQuery를 :

// Check if at least 1 "Departments Affected" checkbox has been checked. 
      $.validator.addMethod('require-one', function(value) { 
       return $('.require-one:checked').size() > 0; 
      }, "Pick at least 1 affected deparment before you save.<br />"); 
      var checkboxes = $('.require-one'); 
      var checkbox_names = $.map(checkboxes, function(e, i) { 
       return $(e).attr("name"); 
      }).join(" "); 

     $('#workorder2').validate({ 
      errorLabelContainer: ".formerror", 
      rules : { 
       "workorder[kickoff_changing]" : 'required', 
       "workorder[rnd]" : 'required', 
       "workorder[is_tryout]" : 'required', 
       "workorder[is_final_shipment_offshore]" : 'required', 
       "workorder[is_final_shipment_customer]" : 'required', 
       groups: { 
        checks: checkbox_names 
       } 

      }, 
      errorPlacement: function(error, element) { 
       element.siblings('.error').html(error); 

      }, 
      submitHandler: function (form) { 
       console.log($('#work_direction')); 

       if(!confirm('Are you sure you want to save this workorder?')){ 
        return false; 
       } 
       console.log($(form).valid()); 
       form.submit(); 
      } 

HTML : 내가 잘못

<tr> 
         <th>Departments Affected?</th> 
         <td> 
          <ul style="list-style-type:none;"> 
           <li> 
           <span class='error'></span> 
            <input id="cad" type="checkbox" name="workorder[affect][cad]" class="require-one"/> 
            <label>Cad (name1, name2)</label> 
           </li> 
           <li> 
            <input id="design" type="checkbox" name="workorder[affect][design]" class="require-one" /> 
            <label>Design (name)</label> 
           </li> 
           <li> 
            <input id="shop" type="checkbox" name="workorder[affect][shop]" class="require-one" /> 
            <label>Shop (name)</label> 
           </li> 
           <li> 
            <input id="cnc" type="checkbox" name="workorder[affect][cnc]" class="require-one" /> 
            <label>CNC (name)</label> 
           </li> 
           <li> 
            <input type="checkbox" name="workorder[affect][acc]" class="require-one" /> 
            <label>Accounting (name)</label> 
           </li> 
           <li> 
            <input type="checkbox" name="workorder[affect][china]" class="require-one" /> 
            <label>Offshore (name1, name2)</label> 
           </li> 
          </ul> 
         </td> 
        </tr> 

을 뭐하는 거지? 나는 태그 위에 <span class="error"></span>을 배치하려했지만 여전히 작동하지 않습니다.

Answer 1

내 문제가 파악되었습니다. 내가

$('#workorder2').validate({ 
    errorLabelContainer: ".formerror", 
    rules : { 
     "workorder[kickoff_changing]" : 'required', 
     "workorder[rnd]" : 'required', 
     "workorder[is_tryout]" : 'required', 
     "workorder[is_final_shipment_offshore]" : 'required', 
     "workorder[is_final_shipment_customer]" : 'required', 
     groups: { 
      checks: checkbox_names 
     } 

    }, 

에서

groups: { 
      checks: checkbox_names 
     } 

이동은 그래서 지금은 도와 주려고에 대한

$('#workorder2').validate({ 
    errorLabelContainer: ".formerror", 
    rules : { 
     "workorder[kickoff_changing]" : 'required', 
     "workorder[rnd]" : 'required', 
     "workorder[is_tryout]" : 'required', 
     "workorder[is_final_shipment_offshore]" : 'required', 
     "workorder[is_final_shipment_customer]" : 'required', 
    }, 

    groups: { 
      checks: checkbox_names 
    }, 

등 모두에게 감사를 보인다!

Answer 2

어때요?

$(document).ready(function() { 
    $('#MY_FORM_ID').submit(function() { 
     var $fields = $(this).find('input[class="require-one"]:checked'); 
     if (!$fields.length) { 
      $('span.error').html("Kindly select at least one option"); 
      return false; // The form will *not* submit 
     } else { $('span.error').html(""); return true; } 
    }); 
});