表单中的单选/复选框“必需”属性？
Posted
技术标签:
【中文标题】表单中的单选/复选框“必需”属性？【英文标题】：Radio/checkbox 'required' attribute in a form? 【发布时间】：2017-05-11 00:00:26 【问题描述】：MDL 版本：1.3.0。
浏览器：谷歌浏览器 55.0.2883.87 m
操作系统：Windows 10。
我正在尝试使用 MDL 进行简单的调查。带有单选框或复选框作为答案的问题列表。页面加载时不会预先选中单选/复选框，用户必须为每个答案选中单选或至少一个复选框。 如果用户没有为至少一个问题选择答案，则单击提交按钮时应显示标准通知（弹出窗口，指向第一个单选框/复选框，并带有文本“请选择其中一个选项”）。
我正在为收音机使用 required 属性，但是在提交所需的弹出窗口时只是“闪烁”（显示和隐藏非常快）并且没有正确显示。
简单的演示在codepen。
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</head>
<body>
<br/>
<br/>
<form>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-1">
<input type="radio" id="option-1" class="mdl-radio__button" name="options" value="1" required>
<span class="mdl-radio__label">First</span>
</label>
<br/>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-2">
<input type="radio" id="option-2" class="mdl-radio__button" name="options" value="2" required>
<span class="mdl-radio__label">Second</span>
</label>
<br/><br/>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" type="submit" id="submit">Submit</button>
</form>
</body>
</html>
【问题讨论】：
【参考方案1】：CSS 中存在问题。似乎如果您隐藏输入（没有宽度/高度和外观 = none），错误消息只会显示一小段时间。如果输入不可见，也许这是预期的浏览器行为？
此解决方法会有所帮助，但可以肯定的是，您将不得不处理其他类型的表单输入中的其他问题：
.mdl-radio.is-upgraded .mdl-radio__button
position: absolute;
width: 1px;
height: 1px;
margin: 0;
padding: 0;
opacity: 0;
-ms-appearance: radio;
-moz-appearance: radio;
-webkit-appearance: radio;
appearance: radio;
border: none;
margin-left: -20px;
Codepen：http://codepen.io/anon/pen/YpozzO
非常相似的问题：Material design lite required validation on checkbox is not showing error message
【讨论】：
【参考方案2】：问题不在代码中。它只是那样工作。真正的问题在于脚本
您用来设置提交按钮样式的引导脚本没有使用必需的选项。 如果您想检查它，请评论它，您的代码将按照您的意愿运行。消息不会像闪存一样消失。
解决方案： 您可以在提交按钮上使用 javascript 函数，该函数将检查上述两个字段之一是否被标记。
【讨论】：
以上是关于表单中的单选/复选框“必需”属性？的主要内容，如果未能解决你的问题，请参考以下文章