Validating check boxes in HTML

Question

I have a form there are 4 options (they may be checkbox or radio).

I want to select multiple options but one is compulsory.

I know it is possible in JS/jQuery but I want a HTML/CSS based solution.

Answer 1

To be able to check multiple inputs, they must be checkboxes. (They could be radio buttons with different names, but you wouldn't be able to uncheck them once checked.)

So use checkboxes, and show the Submit button only if any are checked, using the general sibling selector (~):

input[type="Submit"] {
  display: none;
}

input:checked ~ input[type="Submit"] {
  display: inline;
}

<input id="c1" type="checkbox"><label for="c1">First</label><br>
<input id="c2" type="checkbox"><label for="c2">Second</label><br>
<input id="c3" type="checkbox"><label for="c3">Third</label><br>
<input id="c4" type="checkbox"><label for="c4">Fourth</label><br>
<input type="Submit">

---

If you want the appearance of a disabled submit button, add a second button that is disabled.

When no input is clicked, show the disabled submit button only. When one or more inputs are clicked, show the enabled submit button only:

input[type="Submit"]:not([disabled]) {
  display: none;
}

input:checked ~ input[type="Submit"]:not([disabled]) {
  display: inline;
}

input:checked ~ input[disabled] {
  display: none;
}

<input id="c1" type="checkbox"><label for="c1">First</label><br>
<input id="c2" type="checkbox"><label for="c2">Second</label><br>
<input id="c3" type="checkbox"><label for="c3">Third</label><br>
<input id="c4" type="checkbox"><label for="c4">Fourth</label><br>

<input type="Submit" disabled>
<input type="Submit">

Answer 2

Further to the answer of @Rick Hitchcock, I think that you will want to show to the user the button submit but it will disabled until one of the checkboxes will be checked.

If so, you can use pointer-events (in all modern browsers: http://caniuse.com/#feat=pointer-events) like this:

input[type="Submit"] {
  opacity:0.5;
  pointer-events:none;
  /* animation added for fancy ;) */
  transition:all .2s ease;
}

input:checked ~ .button-wrapper input[type="Submit"] {
  opacity:1;
  pointer-events:all;
}

.button-wrapper {
  position:relative;  
  display:inline-block;
}

.button-wrapper:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:1;
}

input:checked ~ .button-wrapper:before {
  display:none;  
}

<input id="c1" type="checkbox"><label for="c1">First</label><br>
<input id="c2" type="checkbox"><label for="c2">Second</label><br>
<input id="c3" type="checkbox"><label for="c3">Third</label><br>
<input id="c4" type="checkbox"><label for="c4">Fourth</label><br>
<div class="button-wrapper">
  <input type="Submit" tabindex="-1">
</div>

Edit I was added a "mask" in .button-wrapper:before so it will work in the old browsers.

Answer 3

You can do this in html5 using the required attribute Like

<input type="checkbox" required name="your_checkbox_name">

This tells the browser that the form should not be to submitted without the checkbox being checked.Although i recommend java-script since not all browsers will be able to recognize this.

Or

If you want to detect if at least one check box is selected as suggested by @RickHitchcock in the comments,You could use

span {
  display: inline;
  color: red;
}
input[type="Submit"],
input:checked ~ span {
  display: none;
}
input:checked ~ input[type="Submit"] {
  display: inline;
}

<form action="#" method="post">
  <input type="checkbox" />Checkbox 1
  <br />
  <input type="checkbox" />Checkbox 1
  <br />
  <input type="checkbox" />Checkbox 1
  <br />
  <input type="submit" value="Submit" /><span>! Please check at least one checkbox</span>

</form>

Answer 4

You can use the following for which one is compulsory.

<input type="radio" name="name" required>

Which one without required will not be tested if it is ticked or not.

Answer 5

Try This:

<input id="c3" type="checkbox" required><label for="c3">Third</label><br>
<input id="c4" type="checkbox" required><label for="c4">Fourth</label><br>

Or you can try this using jquery to validate a html checkbox:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Makes "field" always required. Nothing and blanks are invalid.  </title>
<link rel="stylesheet" href="http://jqueryvalidation.org/files/demo/site-demos.css">

</head>
<body>
<form id="myform">
<label for="field">Required: </label>
<input type="text" class="left" id="field" name="field">
<br/>
<input type="submit" value="Validate!">
</form>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js">      </script>
 <script src="http://jqueryvalidation.org/files/dist/additional- methods.min.js"></script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
  debug: true,
  success: "valid"
});
$( "#myform" ).validate({
  rules: {
field: {
  required: true
}
  }
});
</script>
</body>
</html>

required is the way html validates things