jQuery 验证是否至少检查了 1 个

Question

我有这段 html 标记:

  <div class="isreq ">
    <div class="row gov_q">
      <div class="form-group">
        <div class="col-xs-8">
          <h5>I want to answer the questions about me.</h5>
        </div>
        <div class="col-sm-4 col-xs-12 label-right-align">
          <input id="extraquestionsgov" name='answer_extra_questions' value='Y' autocomplete="off" type="radio" {% if extraquestionsgov %}checked{% endif %}>
          <label for="extraquestionsgov" class="button-radius">YES</label>
          <input name="answer_extra_questions" id="extraquestionsgov2" value="N" autocomplete="off" type="radio" {% if extraquestionsgov2 %}checked{% endif %}>
          <label for="extraquestionsgov2" class="button-radius">NO</label>
        </div>
      </div>
    </div>
    <p class="err"></p>
  </div>


    <div class="isreq">
      <div class="row gov_q">
        <div class="form-group" id='eth_b1' name="eth_b1">
          <div class="col-sm-4 col-md-4" style="vertical-align: middle;">
            <h5>Your Ethnicity</h5>
          </div>
          <div class="col-sm-8 col-md-8 col-xs-12 label-right-align" style='padding:5px;'>
            <div id="ethb1" class="ethb1" name="ethb1">
            <input type="checkbox" name="eth" value="1" id="eth1_1" class='chk-btn'/>
            <label for='eth1_1'>&nbsp; Hispanic &nbsp;</label>
            <input type="checkbox" name="eth" value="2" id="eth2_1" class='chk-btn'/>
            <label for='eth2_1'> &nbsp;Non Hispanic&nbsp;</label>
            <input type="checkbox" name="eth" value="3" id="eth3_1" class='chk-btn'/>
            <label for='eth3_1'> &nbsp;Other &nbsp;</label>
            </div>

          </div>

        </div>
      </div>
      <p class="err "></p>
    </div>

和这个用于验证的 jQuery 代码:

   var $form1_validator = $('#wizard').validate({
    errorClass: 'error error-plugin label label-info',
    highlight: function(element, errorClass, validClass) {
        $(element).addClass('error error-plugin').removeClass(validClass);
    },
    unhighlight: function(element, errorClass, validClass) {
        $(element).removeClass('error error-plugin').addClass(validClass);
    },
    errorPlacement: function(err, element) {
        console.log(err);
        var el = element.parents('.isreq').find('.err');
        el.prepend(err);
    },
    rules: {
           answer_extra_questions: {
          required: true
        },

        eth: {
          minlength: 1,
          required: true, 
        },
};

为什么它适用于 answer_extra_questions 而不是 !!!对于伦理？？？？从第一个 View 来看，除了单选按钮和复选框之外，一切都是一样的。适用于单选按钮，但不适用于复选框。

谁有什么建议？

Answer 1

将复选框的名称更改为带有 [] 的名称:

HTML:

<label><input type="checkbox" name="eth[]" value="Hispanic" />Hispanic</label>
<label><input type="checkbox" name="eth[]" value="Non-Hispanic" />Non Hispanic</label>
<label><input type="checkbox" name="eth[]" value="Other" />Other</label>

jQuery 验证:

// ...

rules:
{
   // Dont forget to add the ' '
   'eth[]':{ required:true, minlength:1 }
},
messages:
{
    'eth[]':
    {
        required:"Please select an ethnicity.<br/>"
    }
},

// ...

Here是一个工作示例。