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工作但不是！为了eth ???? 从第一个视图看，除了单选按钮和复选框外，一切都是相同的。适用于单选按钮，但不适用于复选框。

谁有任何建议？

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是一个有效的例子。

Answer 2

问题已解决。无法解释造成这种情况的原因，但这种表述：

if (Context.Caller == "UserInfoEndpoint")
    claims.Add(new Claim(JwtClaimTypes.GivenName, user.FirstName));

导致错误。

我的解决方案。我添加了一个额外的隐藏输入复选框，没有任何特定的装饰，但具有相同的名称属性。并使用空值属性。

<input type="checkbox" name="eth" value="1" id="eth1_1" class='chk-btn'/>
<label for='eth1_1'>&nbsp; Hispanic &nbsp;</label>

仅针对CSS的类修复，下一步是：

<input name="eth" class='fix' type="checkbox" value="" id='eth1' >

}

一切都开始奏效了。

也许整个问题是我希望让复选框看起来像一个按钮（显示：无）是否隐藏了＆＃34;检查方块＆＃34;标记

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

2 个答案: