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

MDL版本：1.3.0。表单中的收音机/复选框“必需”属性？

浏览器：谷歌浏览器55.0.2883.87米

操作系统：Windows 10

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

我使用radio所需的属性，但提交期望的弹出窗口只是'闪烁'（显示和隐藏非常快）并且不能正确显示。

简单介绍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>

来源

2016-12-26 nicolausYes

问题不在代码中。它的确如此工作。真正的问题在于脚本

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

解决方案：您可以在提交按钮上使用Javascript函数来检查上述两个字段中的一个是否被标记。

来源

2016-12-26 14:51:55

在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

来源

2016-12-26 15:06:51 nikoskip

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

回答

相关问题