Радио / флажок "обязательный" атрибут в форме?

Версия MDL: 1.3.0.

Браузер: Google Chrome 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>
Источник

2 ответа

Проблема не в коде. Это работает только так. Настоящая проблема заключается в сценарии

Скрипт начальной загрузки, который вы используете для стилизации кнопки отправки, не создан с необходимой опцией. Если вы хотите проверить это, прокомментируйте его, и ваш код будет работать так, как вы хотите. Сообщение не будет мигать.

Решение: Вы можете использовать функцию Javascript для кнопки "Отправить", которая проверит, помечено ли одно из двух полей выше или нет.

Источник

В CSS есть проблема. Кажется, если вы скрываете ввод (без ширины / высоты и внешнего вида = 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

Очень похожий вопрос: для облегчения проверки дизайна материала флажок не показывает сообщение об ошибке

Источник
Другие вопросы по тегам