具有相同名称的多个复选框上的必需属性，并使用自定义替换默认错误消息？ [英] Required attribute on multiple checkboxes with the same name and replace default error message with custom?

问题描述

下面是我要在复选框上使用HTML5验证的表单：
目前我正在使用此解决方案及其来源：https://stackoverflow.com/a/28132953/5278270

Below is the form where I want to use the HTML5 validation on checkbox: Currently I am using this solution and source of it this: https://stackoverflow.com/a/28132953/5278270

$(function() {
  var allRequiredCheckboxes = $(':checkbox[required]');
  var checkboxNames = [];

  for (var i = 0; i < allRequiredCheckboxes.length; ++i) {
    var name = allRequiredCheckboxes[i].name;
    checkboxNames.push(name);
  }

  checkboxNames = checkboxNames.reduce(function(p, c) {
    if (p.indexOf(c) < 0) p.push(c);
    return p;
  }, []);

  for (var i in checkboxNames) {
    ! function() {
      var name = checkboxNames[i];
      var checkboxes = $('input[name="' + name + '"]');
      checkboxes.change(function() {
        if (checkboxes.is(':checked')) {
          checkboxes.removeAttr('required');
        } else {
          checkboxes.attr('required', 'required');
        }
      });
    }();
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form target="_blank">
  <p>
    At least one checkbox from each group is required...
  </p>
  <fieldset>
    <legend>Checkboxes Group test</legend>
    <label>
      <input type="checkbox" name="test[]" value="1" required="required">test-1
    </label>
    <label>
      <input type="checkbox" name="test[]" value="2" required="required">test-2
    </label>
    <label>
      <input type="checkbox" name="test[]" value="3" required="required">test-3
    </label>
  </fieldset>
  <br>
  <fieldset>
    <legend>Checkboxes Group test2</legend>
    <label>
      <input type="checkbox" name="test2[]" value="1" required="required">test2-1
    </label>
    <label>
      <input type="checkbox" name="test2[]" value="2" required="required">test2-2
    </label>
    <label>
      <input type="checkbox" name="test2[]" value="3" required="required">test2-3
    </label>
  </fieldset>
  <hr>
  <button type="submit" value="submit">Submit</button>
</form>

以上代码的来源： https://stackoverflow.com/a/28132953/5278270

它工作正常但我无法更改带有自定义错误消息的默认错误消息。

Its working fine but I am unable to change default error message with custom error message.

推荐答案

为了简化它，使用我对您评论的复选框组的回答。

To simplify it tremendously, using my answer to the checkbox groups you commented on.

jQuery(function($) {
  'use strict';
  var form = $('form');
  var requiredCheckboxes = $(':checkbox[required]');
  
  //checkbox group validity
  requiredCheckboxes.on('change', function(e) {
    var checkboxGroup = requiredCheckboxes.filter('[name="' + $(this).attr('name') + '"]');
    var isChecked = checkboxGroup.is(':checked');
    checkboxGroup.each(function() {
      this.setCustomValidity(''); //remove all custom validity messages
    });
    checkboxGroup.prop('required', !isChecked);
  });
  
  //override form submission
  form.find('[type="submit"]').on('click', function(e) {
    var isValid = form[0].checkValidity();
    if (false === isValid) {
      requiredCheckboxes.each(function() {
        if (false === this.checkValidity()) {
          //the checkbox is not valid, add a custom error message to it.
          this.setCustomValidity('My Error Message');
          //optionally could use this.setCustomValidity($(this).attr('data-invalid'));
        }
      });
      //allow the browser's default submit event behavior 
      return true;
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form target="_blank">
  <p>
    At least one checkbox from each group is required...
  </p>
  <fieldset>
    <legend>Checkboxes Group test</legend>
    <label>
      <input type="checkbox" name="test[]" value="1" required="required">test-1
    </label>
    <label>
      <input type="checkbox" name="test[]" value="2" required="required">test-2
    </label>
    <label>
      <input type="checkbox" name="test[]" value="3" required="required">test-3
    </label>
  </fieldset>
  <br>
  <fieldset>
    <legend>Checkboxes Group test2</legend>
    <label>
      <input type="checkbox" name="test2[]" value="1" required="required">test2-1
    </label>
    <label>
      <input type="checkbox" name="test2[]" value="2" required="required">test2-2
    </label>
    <label>
      <input type="checkbox" name="test2[]" value="3" required="required">test2-3
    </label>
  </fieldset>
  <hr>
  <button type="submit" value="submit">Submit</button>
</form>

这将在单击提交按钮时检查表单的有效性（允许您使用ajax或其他任何方式覆盖它）。如果表单无效，则会找到所有无效的复选框并添加自定义有效性消息。

This will check the form's validity when clicking the Submit button (allowing you to also override it with ajax or whatever). If the form is not valid, it finds all invalid checkboxes and adds a custom validity message.

最后，添加到我的原始代码，当其中一个复选框组是更改后，它会删除它的自定义有效性消息。

Lastly, adding on to my original code, when one of the checkbox groups is changed, it removes it's custom validity message.

这篇关于具有相同名称的多个复选框上的必需属性，并使用自定义替换默认错误消息？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！