3

Как сделать моментальную проверку в <input> по условию в атрибуте pattern?

<form class="contact100-form validate-form" method="post" action="php/reg.php">
  <span class="contact100-form-title">
                        Регистрация
                    </span>

  <div class="wrap-input100 validate-input" data-validate="Обязательное поле">
    <input class="input100" type="text" name="lastname" placeholder="Фамилия" pattern="^[А-Яа-яЁё\s]+$">
    <span class="focus-input100"></span>
    <span class="symbol-input100">
                            <i class="fa fa-user" aria-hidden="true"></i>
                        </span>
  </div>
  <div class="wrap-input100 validate-input" data-validate="Обязательное поле">
    <input class="input100" type="text" name="name" placeholder="Имя" pattern="^[А-Яа-яЁё\s]+$">
    <span class="focus-input100"></span>
    <span class="symbol-input100">
                            <i class="fa fa-user" aria-hidden="true"></i>
                        </span>
  </div>
  <div class="wrap-input100 validate-input" data-validate="Обязательное поле">
    <input class="input100" type="text" name="message" placeholder="Отчество" pattern="^[А-Яа-яЁё\s]+$">
    <span class="focus-input100"></span>
    <span class="symbol-input100">
                            <i class="fa fa-user" aria-hidden="true"></i>
                        </span>
  </div>

  <div class="wrap-input100 validate-input" data-validate="Неверный email! Пример: ex@abc.com">
    <input class="input100" type="text" name="email" placeholder="Email">
    <span class="focus-input100"></span>
    <span class="symbol-input100">
                            <i class="fa fa-envelope" aria-hidden="true"></i>
                        </span>
  </div>

  <div style="display: none;" class="wrap-input100">
    <input id="summa" class="input100" type="text" name="sum" placeholder="Сумма">
    <span></span>
  </div>

  <div style="padding-top: 15px;padding-left: 8px;">
    <input onclick="document.getElementById('summa').value = getRndInteger(1000,3000)" type="checkbox" required>
    <label>Мне есть 18 лет.</label>
  </div>
  <div class="container-contact100-form-btn">
    <button onClick='transfer()' class="contact100-form-btn">
                            ОТПРАВИТЬ
                        </button>
  </div>
</form>

Например, если пользователь в поле "Имя" вводит цифры, то строчка загорается красным сразу же, а не после нажатия кнопки "ОТПРАВИТЬ".

3
  • да, пользователь ниже уже дал ответ на вопрос. будьте добры, подскажите ,пожалуйста, возможно ли сделать так, чтобы кнопка "отправить" была неактивна до того момента, пока все input'ы не пройдут валидность? как я понимаю, для этого нужен скрипт js , сможете подсказать? 24 мар 2021 в 15:37
  • для того, чтобы получить ответ про кнопку, мне нужно создать новый вопрос? 24 мар 2021 в 15:44
  • @Матвей: можете отредактировать этот вопрос - я попробую дополнить.
    – UModeL
    24 мар 2021 в 15:45

2 ответа 2

5

Для этого есть специальный псевдокласс:

input:invalid {
  background-color: #f008;
}

Активация кнопки отправки, при всех валидных полях:

document.querySelector('.validate-form').addEventListener('input', function(ev) {
  document.querySelector('.contact100-form-btn').disabled = !([...this.querySelectorAll('input[type=text]:valid')].filter(el => el.value).length == 4 && this.querySelector('input[type=checkbox]:checked'));
});
input:invalid { background-color: #f008; }
<form class="contact100-form validate-form" method="post" action="php/reg.php">
  <span class="contact100-form-title">Регистрация</span>
  <div class="wrap-input100 validate-input" data-validate="Обязательное поле">
    <input class="input100" type="text" name="lastname" placeholder="Фамилия" pattern="^[А-Яа-яЁё]+$">
    <span class="focus-input100"></span>
    <span class="symbol-input100"><i class="fa fa-user" aria-hidden="true"></i></span>
  </div>
  <div class="wrap-input100 validate-input" data-validate="Обязательное поле">
    <input class="input100" type="text" name="name" placeholder="Имя" pattern="^[А-Яа-яЁё]+$">
    <span class="focus-input100"></span>
    <span class="symbol-input100"><i class="fa fa-user" aria-hidden="true"></i></span>
  </div>
  <div class="wrap-input100 validate-input" data-validate="Обязательное поле">
    <input class="input100" type="text" name="message" placeholder="Отчество" pattern="^[А-Яа-яЁё]+$">
    <span class="focus-input100"></span>
    <span class="symbol-input100"><i class="fa fa-user" aria-hidden="true"></i></span>
  </div>
  <div class="wrap-input100 validate-input" data-validate="Неверный email! Пример: ex@abc.com">
    <input class="input100" type="text" name="email" placeholder="Email">
    <span class="focus-input100"></span>
    <span class="symbol-input100"><i class="fa fa-envelope" aria-hidden="true"></i></span>
  </div>
  <div style="display: none;" class="wrap-input100">
    <input id="summa" class="input100" type="text" name="sum" placeholder="Сумма">
    <span></span>
  </div>
  <div style="padding-top: 15px;padding-left: 8px;">
    <label><input onclick="document.getElementById('summa').value = getRndInteger(1000,3000)" type="checkbox" required>Мне есть 18 лет.</label>
  </div>
  <div class="container-contact100-form-btn">
    <button onClick='transfer()' class="contact100-form-btn" disabled>ОТПРАВИТЬ</button>
  </div>
</form>

5
  • 1
    спасибо большое! будьте добры, подскажите ,пожалуйста, возможно ли сделать так, чтобы кнопка "отправить" была неактивна до того момента, пока все input'ы не пройдут валидность? как я понимаю, для этого нужен скрипт js , сможете подсказать? 24 мар 2021 в 15:36
  • @Матвей: реальная валидация Вам понадобится на сервере, а на клиенте просто защита от дурака. Но, если нужен простой скрипт, то добавьте соответствующую метку к вопросу.
    – UModeL
    24 мар 2021 в 15:44
  • 1
    да, мне именно и нужна эта защита от дурака 24 мар 2021 в 15:46
  • @Sevastopol: хде? Если от обработчика клика, то это к автору - там его функа. А я закомментировал её при отладке.
    – UModeL
    24 мар 2021 в 17:26
  • @Sevastopol: Паш, у меня есть по году открытые вкладки - лень доделать. Но и не закрываю, пока результата не добьюсь. Я лучше новые вопросы пропущу, но буду в своём ответе уверен.
    – UModeL
    24 мар 2021 в 17:32
0

Cтили для :valid и :invalid применяются сразу же во время того как пользователь осуществляет ввод, даже если если переменная пустая.

В случае если в поля введено ошибочное значение можно поменять стиль кнопки. Однако более гибкого результата не зависящего от разметки можно достичь через js обработчики (делать кнопку неактивной при вводе проверяя наличие ошибки)

input:valid{
  border: 1px solid gray;
}
input:invalid{
  border: 2px solid purple;
}

input:invalid ~ div > button {
  color: red;
}
<form>
  <input type="text" pattern="[A-z]*">
  <input type="text" pattern="[A-z]*">
  <div class="container-contact100-form-btn">
    <button onClick='transfer()' class="contact100-form-btn" >
      ОТПРАВИТЬ
    </button>
  </div>
</form>

Вот пример с использованием проверки checkValidity() Так же используется делегирование событий для обработки всех полей формы

const btnSend= document.getElementById('btnSend');
document.querySelector('form').addEventListener('keyup', validate, false)

function validate(e){
   btnSend.disabled = !e.target.checkValidity()
}
input:valid{
  border: 1px solid gray;
}
input:invalid{
  border: 2px solid purple;
}

input:invalid ~ div > button {
  color: red;
}
<form>
  <input type="text" pattern="[A-z]*">
  <input type="text" pattern="[A-z]*">
  <div class="container-contact100-form-btn">
    <button id="btnSend"  onClick='transfer()' class="contact100-form-btn" >
      ОТПРАВИТЬ
    </button>
  </div>
</form>

2
  • Всё бы хорошо, но пустые поля, думаю, не совсем валидные.
    – UModeL
    24 мар 2021 в 16:57
  • Это можно решить добавив флаг required после получения/потери фокуса либо когда значение изменяется. Но, да по хорошему нужна более серъезная функция проверки + на сервере 25 мар 2021 в 2:05

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.