Display HTML5 Error Message/validation On Hidden Radio/checkbox

I have CSS-customized radio buttons, which have required validation. The default radio buttons are hidden by CSS rule. When I submit the form, the default validation message is als

Solution 1:

as @joostS said, hidden radio button will not trigger native error message. for that we need to hide it using opacity. I have created sample example.

Also it will not trigger validation until we submit the form by clicking on submit button. If you need validation on "onChange" event of any form elements, then we need to use jQuery or Javascript solution to achieve that.

I hope it will be helpful.

label {
	display: inline-block;
	border: 2px solid #83d0f2;
	padding: 10px;
	border-radius: 3px;
	position: relative;
}

input[type="radio"] {
  opacity: 0;
	position: absolute;
	z-index: -1;
}

input[type="radio"]:checked +label {
  border: 1px solid #4CAF50;
}

input[type="radio"]:invalid +label {
  
}

<h3>Gender</h3>
<form>
	
	
		<input id="male" type="radio" name="gender" value="male" required> 
	<label for="male">Male</label>

	
		<input id="female" type="radio" name="gender" value="female" required> 
	<label for="female">Female</label>

	
		<input id="other" type="radio" name="gender" value="other" required>
	<label for="other">Child</label>

	<input type="submit" />
</form>

Solution 2:

You could try using the CSS :invalid pseudo-class. Use this HTML:

<label for="male">Male</label>
<input id="male" type="radio" name="gender" value="male" required>
<span class="error-message">Please select on of the options</span>

And the following CSS:

input[name=gender] + .error-message { display: none; } // or whatever you wanna do with it
input[name=gender]:invalid + .error-message { display: block; }

MDN documentation about :invalid

Solution 3:

Here you go...

body {font-size: 15px; font-family: serif;}
input {
  background: transparent;
  border-radius: 0px;
  border: 1px solid black;
  padding: 5px;
  box-shadow: none!important;
  font-size: 15px; font-family: serif;
}
input[type="submit"] {padding: 5px 10px; margin-top: 5px;}
label {display: block; padding: 0 0 5px 0;}
form > div {margin-bottom: 1em; overflow: auto;}
.hidden {
  opacity: 0; 
  position: absolute; 
  pointer-events: none;
}
.checkboxes label {display: block; float: left;}
input[type="radio"] + span {
  display: block;
  border: 1px solid black;
  border-left: 0;
  padding: 5px 10px;
}
label:first-child input[type="radio"] + span {border-left: 1px solid black;}
input[type="radio"]:checked + span {background: silver;}

<form>

  <div>
    <label for="name">Name (optional)</label>
    <input id="name" type="text" name="name">
  </div>

  <label>Gender</label>
  <div class="checkboxes">
    <label><input id="male" type="radio" name="gender" value="male" class="hidden" required><span>Male</span></label>
    <label><input id="female" type="radio" name="gender" value="male" class="hidden" required><span>Female </span></label>
    <label><input id="other" type="radio" name="gender" value="male" class="hidden" required><span>Other</span></label>
  </div>

  <input type="submit" value="Send" />

</form>

Although I like the minimalistic approach of using native HTML5 validation, you might want to replace it with Javascript validation on the long run. Javascript validation gives you far more control over the validation process and it allows you to set real classes (instead of pseudo classes) to improve the styling of the (in)valid fields. This native HTML5 validation can be your fall-back in case of broken (or lack of) Javascript. You can find an example of that here, along with some other suggestions on how to make Better forms, inspired by Andrew Cole.