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

Question

MDL Version: 1.3.0. MDL版本：1.3.0。

Browser: Google Chrome 55.0.2883.87 m 浏览器：谷歌浏览器55.0.2883.87米

OS: Windows 10. 操作系统：Windows 10。

I'm trying to use MDL for a simple survey. 我正在尝试使用MDL进行简单的调查。 List of questions with radios or checkboxes as answers. 带无线电或复选框的问题列表作为答案。 Radios/Checkboxes are not pre-checked when a page is loading and User has to check a radio or at least one checkbox for every answer. 页面加载时不预先检查无线电/复选框，用户必须检查收音机或每个答案至少一个复选框。 If User didn't select the answer for at least one question, the standard notification (popup, pointing to the first radio/checkbox with a text 'Please select one of this options') should be shown when clicking on Submit button. 如果用户没有为至少一个问题选择答案，则单击“提交”按钮时，应显示标准通知（弹出窗口，指向带有文本'请选择其中一个选项'的第一个收音机/复选框）。

I'm using the required attribute for radio, but while submitting the desired popup is only 'blinking' (show and hide very fast) and not showing properly. 我正在使用收音机所需的属性，但提交所需的弹出窗口只是“闪烁”（显示和隐藏非常快）并且没有正确显示。

Simple demostration is on codepen . 简单的演示是在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

The problem is not in the code. 问题不在代码中。 It does work like that only. 它确实只是那样工作。 The real problem lies in the script 真正的问题在于脚本

The bootstrap script you are using to style your submit button is not made with the required option. 您用于设置提交按钮样式的引导脚本不是使用必需选项制作的。 If you want to check it comment it and your code will work as you want.The message would not go as a flash. 如果你想检查它评论它，你的代码将按你的意愿工作。消息不会闪现。

Solution: You can use a Javascript function on Submit button which will check whether one of the above two fields are marked or not. 解决方案：您可以在“提交”按钮上使用Javascript功能，该功能将检查上述两个字段之一是否已标记。

Answer 2

There is an issue in the CSS. CSS中存在问题。 It seems if you hide the input (no width/height and appereance = none ), the error message shows up only for a very small moment. 看起来如果你隐藏了输入（没有宽度/高度和appereance = none ），错误信息只会在很短的时间内出现。 Maybe it's a expected browser behavior if the input is not visible? 如果输入不可见，可能是预期的浏览器行为？

This workaround will help, but for sure you will have to deal with other issues in others types of form inputs: 此解决方法将有所帮助，但您肯定必须处理其他类型的表单输入中的其他问题：

.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 Codepen： http ：//codepen.io/anon/pen/YpozzO

Very similar question: Material design lite required validation on checkbox is not showing error message 非常相似的问题：复选框上的材料设计精简版验证未显示错误消息

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

问题描述

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