체크 박스 그룹에 체크 박스가 선택되지 않은 경우 표시 오류

Question

동일한 체크 박스 그룹에서 체크 박스를 선택하지 않으면 Foundation 5의 HTML5 양식 확인 라이브러리에 오류 메시지가 어떻게 표시됩니까?

Answer 1

직접 작성한 유효성 검사기를 작성해야하지만 매우 간단합니다.

근무 예 : CodePen link

자바 스크립트

$(document).foundation({ 
    abide: { 
     validators: { 
      checkbox_limit: function(el, required, parent) { 
       var group = parent.closest('.checkbox-group'); 
       var min = group.attr('data-abide-validator-min'); 
       var checked = group.find(':checked').length; 
       if (checked >= min) { 
        group.find('small.error').hide(); 
        return true; 
       } else { 
        group.find('small.error').css({ 
         display: 'block' 
        }); 
        return false; 
       } 
      } 
     } 
    } 
}); 

HTML

<form data-abide> 
    <div class="row"> 
     <div class="small-12 column"> 
     <h4>Select your favourite vehicles</h4> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="small-12 columns checkbox-group" data-abide-validator-min="1"> 
     <label> 
      <input type="checkbox" data-abide-validator="checkbox_limit" value="car" /> 
      car 
     </label> 
     <label> 
      <input type="checkbox" data-abide-validator="checkbox_limit" value="train" /> 
      train 
     </label> 
     <label> 
      <input type="checkbox" data-abide-validator="checkbox_limit" value="bicycle" /> 
      bicycle 
     </label> 
     <label> 
      <input type="checkbox" data-abide-validator="checkbox_limit" value="ferry" /> 
      ferry 
     </label> 
     <label> 
      <input type="checkbox" data-abide-validator="checkbox_limit" value="plane" /> 
      plane 
     </label> 
     <small class="error">You have to check at least one vehicle.</small> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="small-12 columns"> 
     <button type="submit">Submit</button> 
     </div> 
    </div> 
</form>