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.

Manageable

Why tag the question with javascript if you want a solution without javascript? – Aesthetics

HTML5 has this feature, Refer this: HTML5: How to use the “required” attribute with a “radio” input field – Tidy

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">

Boudreaux

In the second approach it is still possible to submit an invalid form using tab to navigate and pressing space. – Clinkstone

@falsarella, excellent point! Now edited to give the Submit button a negative tabindex. – Boudreaux

Unfortunately, setting tabindex to -1 obviously disables the tab navigation, breaking the accessibility. – Clinkstone

Hmm, maybe we could hide the submit button and show a fake basic disabled button instead, then show the submit back again when checked... Seems little tricky, but a possible html-and-css-only approach. What do you think? – Clinkstone

Nice! Got my +1 now :) – Clinkstone

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.

Epidemiology

pointer-events does not work in IE10 and below. If a user is browsing in IE10, they will be able to click the button without checking any checkboxes. – Yolanthe

@rblarsen, thank you for your comment. I was updated my answer to support the old too. I was mention that pointer-events works on modern browsers and added the caniuse link. Also, he need to validate the submit event anyway (server at least) it's not that problem to send the form even the button are hidden ;) – Epidemiology

You can get around pointer-events not working in IE10 and below with the following JS workaround: codepen.io/jonathan/pen/BriCb .. Also IE11 allows pointer-events but only if links display property is set to block or inline-block. – Brittanybritte

It is still possible to submit an invalid form using tab to navigate and pressing space. – Clinkstone

@falsarella, You can submit the form within the browser in any way. This validation it's just for the UX for users who are not trying to hack. In any way, you have to validate the input in the server. – Epidemiology

Despite I kind of agree, that's still trying to answer what OP asked. Anyway, we found a better way. – Clinkstone

@Clinkstone I'm happy that you found a better way ;) You have a point, so I was updated my answer. I was added tabindex=-1 to the submit button, so you can't access it using tab. – Epidemiology

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>

Yuan

The form couldn't be submitted unless this particular input was checked. – Boudreaux

@RickHitchcock Yeah,I guess that's what the OP wanted. – Yuan

I'm pretty sure the OP is asking for a checkbox group with the requirement "Select one or more" not "Select this particular one and zero or more of the others" – Checkpoint

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.

Abey

You can select only one radio button with a given name. – Boudreaux

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

Kirkland

Have you read my question properly, "I want to select multiple options but one is compulsory." not all of these are compulsory... – Manageable