Validate checkbox with jquery.validate.unobtrusive

Question

I need to validate lows checkbox with jquery.validate.unobtrusive and I use this code but always checkbox is valid. How to solve this?

<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()

Rory McCrossan · Accepted Answer · 2017-07-19 11:38:51Z

14

The issue is because your data attributes for the required rule are incorrect. You need to set data-rule-required="true", then put the error message in to data-msg-required. Try this:

$('#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>

answered Jul 19, 2017 at 11:38

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

BrianS Over a year ago

Note that though this produces the desired result it doesn't provide full context. Instead of requiring the checkbox using Unobtrusive, this utilizes functionality built into the jQuery Validation plugin that sets up rules based on data- attributes.

BrianS Over a year ago

Still, have my upvote for showing me something I didn't know.

BrianS · Accepted Answer · 2023-06-07 15:09:30Z

The issue appears to be that the Unobtrusive library interprets "required" differently than jQuery Validation when it comes to checkboxes. Unobtrusive interprets "required" as having a value and in the typical use case (as part of .NET MVC) a checkbox will always have a value.

Though the source is old, the following information is still relevant:

Yes Validation is not performed for checkboxes because the programmers that wrote the adapter says that required is different [from] mandatory...A required validation attribute must trigger if no value is provided! An unchecked checkbox has a a value: the false value!

See here the source code of the adapter for the required attribute:
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);
  }
});

I did find a way to get Unobtrusive to behave in the desired manner, and that was to set up validation so that the value of the field must equal itself (using the "equalto" validation):

.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/[email protected]/dist/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

Collectives™ on Stack Overflow

Validate checkbox with jquery.validate.unobtrusive

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related