각 그룹의 확인란이 적어도 하나 이상입니까?

Question

현재 각 jQuery 유효성 검사에 새 규칙을 적용하여 각 그룹에 하나 이상의 확인란이 선택되어 있는지 확인합니다.

어려운 점은 확인란 이름을 변경할 수 없다는 것입니다. 여기

내 현재 jQuery를 수 있습니다 :

<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.js"></script> 
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script> 
<script language="javascript" type="text/javascript"> 
$(document).ready(function() { 
    $('#docContainer').validate({ // initialize the plugin 
     rules: { 
      EMAIL: { 
       required: true, 
       email: true 
      }, 
      FNAME: { 
       required: true 
      }, 
      POSTCODE: { 
       digits: true, 
       minlength: 4 
      }, 
      mark1: { 
       required: function(elem) 
       { 
        if ($('input[name="group[20349][1]"]:checked').length > 0 || 
         $('input[name="group[20349][2]"]:checked').length > 0 || 
         $('input[name="group[20349][3]"]:checked').length > 0) 
        { 
         return true; 
        } 
        return false; 
       } 
      }, 
      mark2: { 
       required: function(elem) 
       { 
        if ($('input[name="group[20353][1]"]:checked').length > 0 || 
         $('input[name="group[20353][2]"]:checked').length > 0 || 
         $('input[name="group[20353][3]"]:checked').length > 0) 
        { 
         return true; 
        } 
        return false; 
       } 
      }, 
      mark3: { 
       required: function(elem) 
       { 
        if ($('input[name="group[20357][1]"]:checked').length > 0 || 
         $('input[name="group[20357][2]"]:checked').length > 0 || 
         $('input[name="group[20357][3]"]:checked').length > 0) 
        { 
         return true; 
        } 
        return false; 
       } 
      } 
     }, 
     messages: { 
      FNAME: "<b style='color:#FFFFFF'>Please fill your first name...</b>", 
      EMAIL: { 
       required: "<b style='color:#FFFFFF'>We need your email address to contact you!</b>", 
       email: "<b style='color:#FFFFFF'>Your email address must be in the format of name@domain.com</b>" 
      }, 
      POSTCODE: { 
       digits: "<b style='color:#FFFFFF'>Post Code must be numbers only...</b>", 
       minlength: "<b style='color:#FFFFFF'>Post Code must be at least 4 digits...</b>" 
      }, 
      mark1: "<b style='color:#FFFFFF'>You must CHECK at least 1 option for Type Of Property...</b>", 
      mark2: "<b style='color:#FFFFFF'>You must CHECK at least 1 option for Bedrooms...</b>", 
      mark3: "<b style='color:#FFFFFF'>You must CHECK at least 1 option for Price Range...</b>" 
     } 
    }); 
}); 
</script> 

mark1, mark2, mark3은 안으로 볼 수있는, 내 체크 박스는 각각 I에 대한 고유 한 이름이 각 그룹에 대한 규칙으로 맞게 생성 된 필드입니다 그건 바꿀 수 없어요. 일명 mark3가 구성되어 group[20353][1], group[20353][2], group[20353][3] 그룹 3 : 일명 mark2이 구성되어 group[20349][1], group[20349][2], group[20349][3] 그룹 2 :

그룹 1은 일명 mark1이 구성되어 group[20357][1], group[20357][2], group[20357][3]

내 문제는 규칙이 작동하지 않는다는 것입니다. 이름, 전자 메일에 대해 트리거되지만 각 그룹에 대해 확인되지 않은 경우에는 확인란을 트리거하지 않습니다.

어떻게 해결할 수 있습니까? -

Answer 1

때 사용자가 양식을 제출하려고 :

속성이었다 추가를 data-foo="anynameyouwantforyourgroup"

$('#docContainer').submit(function() { 
    if ($('[data-foo=property]:checked').size() == 0) 
    { 
     alert('You must CHECK at least 1 option for group X'); 
     return false; 
    } 

    if ($('[data-foo=bedrooms]:checked').size() == 0) { 
     alert('You must CHECK at least 1 option for group Y'); 
     return false; 
    } 

    if ($('[data-foo=price]:checked').size() == 0) { 
     alert('You must CHECK at least 1 option for group Z'); 
     return false; 
    } 
    return true; 
}); 

Answer 2

사용이 내가 그것을 해결할 수 있었다 내 각 그룹에 새로운 속성을 만들어

if(!$('input[name="group[20349]').val()){ 
    // code on error 
} 

Answer 3

기본적으로으로, jQuery 유효성 검사 플러그인은 자동으로 그룹에 하나 이상의 확인란을 선택합니다 확인됩니다. 그룹에 required 규칙을 적용하기 만하면됩니다.

jQuery를 :

$(document).ready(function() { 

    $('#myform').validate({ 
     rules: { 
      checkboxGroup1: { 
       required: true 
      } 
     }, 
     messages: { 
      checkboxGroup1: { 
       required: "you must check at least one from Group 1" 
      } 
     } 
    }); 

}); 

HTML :

<form id="myform"> 
    <input type="checkbox" name="checkboxGroup1" /><br/> 
    <input type="checkbox" name="checkboxGroup1" /><br/> 
    <input type="checkbox" name="checkboxGroup1" /><br/> 
    <br/> 
    <input type="submit" /> 
</form> 

DEMO : http://jsfiddle.net/42PrP/