Есть ли способ сделать кнопку отправки доступной только с определенным кодом во входных данных, используя только HTML?

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я пытаюсь сделать кнопку ОТПРАВКИ доступной только тогда, когда в трех полях ввода пользователь вводит цифры 0 4 2 — в том же порядке.

Я знаю, что это легко достижимо с помощью JS, но мне было интересно, возможно ли это и с помощью только HTML.

Вот пример ссылки: https://scontent.fskp1-1.fna.fbcdn.net/v/t1.15752-9/122988049_648515422431558_1560231741132468095_n.png?_nc_cat=109amp;ccb=2amp;_nc_sid=ae9488amp;_nc_ohc=lPPHXpw9wZkAX8pk002amp;_nc_ht=scontent.fskp1-1.fnaamp;oh=05c12b348cca4c9546d465f41f074603amp;oe=5FBF87D0

 <form action="#">
        <input class="code" type="text" required="required">
        <input class="code" type="text" required="required">
        <input class="code" type="text" required="required"> <br>
    <input type="submit" value="Unlock" />
</form>

Ответ №1:

Хотя это работает, это глупый трюк CSS, не обладает большой гибкостью и действительно не должен использоваться в производстве.

 input[type=submit] {
  pointer-events: none;
  color: red;
}
input:valid   input:valid   input:valid   br   input[type=submit] {
  pointer-events: auto;
  color: green;
}

 <form action="#">
    <input class="code" type="text" required="required" pattern="0">
    <input class="code" type="text" required="required" pattern="4">
    <input class="code" type="text" required="required" pattern="2"><br>
    <input type="submit" value="Unlock" />
</form>

:valid Псевдокласс сопоставляет проверенные входные данные и сопоставляет соседние родственные элементы. pointer-events: none; предотвращает нажатие.

pattern Атрибут устанавливает регулярное выражение для проверки поля.