Question

MDL版本：1.3.0。

浏览器：Google Chrome 55.0.2883.87 m

操作系统：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

非常相似的问题：Material design lite required validation on checkbox is not showing error message

表单中的广播/复选框“必填”属性？

2 个答案: