表格中的收音机/复选框“必需”属性？

Question

MDL版本：1.3.0。

浏览器：谷歌浏览器55.0.2883.87米

操作系统：Windows 10。

我正在尝试使用MDL进行简单的调查。 带无线电或复选框的问题列表作为答案。 页面加载时不预先检查无线电/复选框，用户必须检查收音机或每个答案至少一个复选框。 如果用户没有为至少一个问题选择答案，则单击“提交”按钮时，应显示标准通知（弹出窗口，指向带有文本'请选择其中一个选项'的第一个收音机/复选框）。

我正在使用收音机所需的属性，但提交所需的弹出窗口只是“闪烁”（显示和隐藏非常快）并且没有正确显示。

简单的演示是在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>

Answer 1

问题不在代码中。 它确实只是那样工作。 真正的问题在于脚本

您用于设置提交按钮样式的引导脚本不是使用必需选项制作的。 如果你想检查它评论它，你的代码将按你的意愿工作。消息不会闪现。

解决方案：您可以在“提交”按钮上使用Javascript功能，该功能将检查上述两个字段之一是否已标记。

Answer 2

CSS中存在问题。 看起来如果你隐藏了输入（没有宽度/高度和appereance = 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

非常相似的问题：复选框上的材料设计精简版验证未显示错误消息

表格中的收音机/复选框“必需”属性？

问题描述

2 个解决方案

解决方案1
0 2016-12-26 14:51:55

解决方案2
0 2016-12-26 15:06:51

表格中的收音机/复选框“必需”属性？

问题描述

2 个解决方案

解决方案1 0 2016-12-26 14:51:55

解决方案2 0 2016-12-26 15:06:51

解决方案1
0 2016-12-26 14:51:55

解决方案2
0 2016-12-26 15:06:51