在隐藏的收音机/复选框上显示HTML5错误消息/验证

Question

我有CSS自定义单选按钮，具有必需验证。 CSS规则隐藏了默认的单选按钮。

当我提交表单时，默认验证消息也会隐藏。

表格看起来像这样

如何在禁用单选按钮时显示默认错误消息（例如：请选择其中一个选项）？ （不使用Js的纯HTML / CSS）

input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  visibility: hidden;
}

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

<h3>Gender</h3>

<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">Rather not to say</label>

Answer 1

正如@joostS所说，隐藏的单选按钮不会触发本机错误消息。为此，我们需要使用不透明度隐藏它。我已经创建了示例示例。

如果没有提交表单也不会触发验证，如果你需要onchange验证，那么我们需要使用jQuery或Javascript解决方案来做到这一点。

我希望它会有所帮助。

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>

Answer 2

您可以尝试使用CSS :invalid伪类。使用此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>

以下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

Answer 3

你去......

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

虽然我喜欢使用原生HTML5验证的简约方法，但您可能希望从长远来看用Javascript验证替换它。 Javascript验证使您可以更好地控制验证过程，它允许您设置实际类（而不是伪类）以改进（有效）字段的样式。如果Javascript损坏（或缺少），这种本机HTML5验证可以是您的后备。您可以在here的启发下找到Better forms的示例以及有关如何制作Andrew Cole的其他一些建议。