表格中的收音機/復選框“必需”屬性？

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