表单中的单选/复选框“必需”属性？答案

【问题标题】：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>

【问题讨论】：

标签： javascript html css material-design material-design-lite

【解决方案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 函数，该函数将检查上述两个字段之一是否被标记。

【讨论】：