Required Attribute On Multiple Checkboxes With The Same Name And Replace Default Error Message With Custom?

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 Sour

Solution 1:

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 returntrue;
    }
  });
});

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

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.

Solution 2:

Make use of oninvalid attribute on each checkbox and assign it with setCustomValidity() function which accepts message parameter and pass your default message. Below I've added it in document.ready for each checkbox. You can add it in design for each checkbox if you want different custom message.

Syntax :oninvalid="setCustomValidity('Your custom message here')"

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

$(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')");
  })
});

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