使用jquery.validate.unobtrusive验证复选框

ct2axkht  于 2023-06-22  发布在  jQuery
关注(0)|答案(2)|浏览(118)

我需要用jquery.validate.unobtrusive验证低复选框,我使用此代码,但始终复选框是有效的。如何解决这个问题?

<input id="AcceptLaws" type="checkbox" name="AcceptLaws" data-val="true" data-val-required="Please accept with laws">
<span class="field-validation-valid" data-valmsg-for="AcceptLaws" data-valmsg-replace="true"></span>
$('#AcceptLaws').valid()
rnmwe5a2

rnmwe5a21#

问题是因为所需规则的data属性不正确。您需要设置data-rule-required="true",然后将错误消息放入data-msg-required。试试这个:

$('#AcceptLaws').valid()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>

<form>
  <input id="AcceptLaws" type="checkbox" name="AcceptLaws" data-val="true" data-rule-required="true" data-msg-required="Please accept with laws" />
  <span class="field-validation-valid" data-valmsg-for="AcceptLaws" data-valmsg-replace="true"></span>
</form>
7qhs6swi

7qhs6swi2#

问题似乎是Unobtrusive库在复选框方面对“required”的解释与jQuery Validation不同。Unobtrusive将“required”解释为具有值,并且在典型用例中(作为.NET MVC的一部分),复选框将始终具有值。
虽然source is old,以下信息仍然相关:
Yes不会对复选框执行验证,因为编写适配器的程序员说required不同于mandatory...如果没有提供值,则必须触发required验证属性!未选中的复选框具有a值:假值!
下面是所需属性的适配器源代码:

adapters.add("required", function (options) {
  // jQuery Validate equates "required" with "mandatory" for checkbox elements
  if (options.element.tagName.toUpperCase() !== "INPUT" || options.element.type.toUpperCase() !== "CHECKBOX") {
    setValidationValues(options, "required", true);
  }
});

我确实找到了一种方法来让Unobtrusive以所需的方式运行,那就是设置验证,以便字段的值必须等于它自己(使用“equalto”验证):

.field-validation-error {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation-unobtrusive@4.0.0/dist/jquery.validate.unobtrusive.min.js"></script>

<form>
  <p>
    <label>
      <input id="AcceptLaws" type="checkbox" name="AcceptLaws" data-val="true" data-val-equalto="You must accept the cited laws" data-val-equalto-other="AcceptLaws" />
      I accept
    </label>
    <br>
    <span class="field-validation-valid" data-valmsg-for="AcceptLaws" data-valmsg-replace="true"></span>
  </p>
  <p>
    <button type="button" onclick="$('#AcceptLaws').valid();">Accept</button>
  </p>
</form>

相关问题