具有相同名称的多个复选框上的必需属性，并使用自定义替换默认错误消息？

时间：2016-06-28 07:23:58

标签： javascript jquery html5

下面是我要在复选框上使用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

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

2 个答案:

答案 0 :(得分：2)

使用您评论过的my answer to the checkbox groups来极大地简化它。

＆＃13;
＆＃13; 
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;
    }
  });
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

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

答案 1 :(得分：0)

在每个SELECT * FROM test WHERE duma LIKE '%(ccc)%'; 上使用oninvalid属性，并为其分配checkbox函数，该函数接受消息参数并传递您的默认消息。我已在setCustomValidity()为document.ready添加了checkbox。如果您需要不同的自定义消息，可以在设计中为每个复选框添加它。

语法： oninvalid="setCustomValidity('Your custom message here')"

例如： <input type="checkbox" name="test[]" value="1" required="required" oninvalid="setCustomValidity('Your custom message here')">test-1

＆＃13;
＆＃13; 
$(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');
        }
      });
    }();
  }

});

$(document).ready(function(){
  $('input:checkbox').each(function(){
    $(this).attr('oninvalid',"setCustomValidity('Please select this checkbox')");
  })
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题