javascript - 具有相同名称的多个复选框的必需属性并将默认错误消息替换为自定义？

Question

下面是我想在复选框上使用 HTML5 验证的表单:目前我正在使用这个解决方案及其来源: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

它工作正常，但我无法使用自定义错误消息更改默认错误消息。

Answer 1

为了极大地简化它，使用 my answer to the checkbox groups你发表了评论。

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 或其他方式覆盖它)。如果表单无效，它会查找所有无效复选框并添加自定义有效性消息。

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