Как отобразить предупреждение о необходимости формы в свернутых деталях? - PullRequest
0 голосов
/ 18 июня 2019

У меня есть форма с обязательным флажком внутри тега подробностей. Когда пользователь пытается отправить сайт, не устанавливая флажок, отображается предупреждение.

Но когда пользователь свернул детали, предупреждение не отображается, и отправка просто не работает. Есть ли чистый способ html, чтобы заставить это работать или мне нужно использовать javascript? В основном я ожидаю, что браузер автоматически откроет данные и отобразит предупреждение в флажке.

См. Эту демонстрацию для решения проблемы https://jsfiddle.net/1jwdm8ov/

<html>
    <form>
        <details>
            <input type="checkbox" required="required">
        </details>
        <input type="submit">
    </form>
</html>

1 Ответ

1 голос
/ 18 июня 2019

Я не могу придумать, как сделать это с помощью CSS, но вы можете использовать javascript, чтобы подключиться к проверке формы браузера и проверить, требуется ли поле.Если ввод требуется и не был завершен, вы можете открыть родительский элемент сведений с помощью .open = true;, что позволит увидеть требуемое сообщение.

var detailInputs = document.querySelectorAll('form details input');

[].forEach.call(detailInputs, function(detailInputs) {
  detailInputs.addEventListener('invalid',function(e){
    detailInputs.parentNode.open = true;
  });
});
<form>
  <details>
    <input type="checkbox" required="required">
  </details>
  <input type="submit">
</form>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...