1

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>

Source for above code: https://stackoverflow.com/a/28132953/5278270

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

Community
  • 1
  • 1
Vivek Sancheti
  • 384
  • 1
  • 3
  • 18

2 Answers2

2

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>

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.

Community
  • 1
  • 1
Will B.
  • 17,883
  • 4
  • 67
  • 69
  • Thanks a lot. This works. Hope this will not add some validity on inputs which do not have required. – Vivek Sancheti Jun 30 '16 at 07:06
  • @VivekSancheti currently it only applies to the checkboxes that have the required attribute, by specifying `var requiredCheckboxes = $(':checkbox[required]')` and only iterating over the `requiredCheckboxes` variable. The code should be fairly simple to read and expand upon if needed. – Will B. Jun 30 '16 at 20:11
0

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')");
  })
});
<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>
Guruprasad J Rao
  • 29,410
  • 14
  • 101
  • 200