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! Пример: [email protected]">
    <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 , сможете подсказать? Commented 24 мар. 2021 в 15:37
  • для того, чтобы получить ответ про кнопку, мне нужно создать новый вопрос? Commented 24 мар. 2021 в 15:44
  • @Матвей: можете отредактировать этот вопрос - я попробую дополнить.
    – UModeL
    Commented 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! Пример: [email protected]">
    <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 , сможете подсказать? Commented 24 мар. 2021 в 15:36
  • @Матвей: реальная валидация Вам понадобится на сервере, а на клиенте просто защита от дурака. Но, если нужен простой скрипт, то добавьте соответствующую метку к вопросу.
    – UModeL
    Commented 24 мар. 2021 в 15:44
  • 1
    да, мне именно и нужна эта защита от дурака Commented 24 мар. 2021 в 15:46
  • @Sevastopol: хде? Если от обработчика клика, то это к автору - там его функа. А я закомментировал её при отладке.
    – UModeL
    Commented 24 мар. 2021 в 17:26
  • @Sevastopol: Паш, у меня есть по году открытые вкладки - лень доделать. Но и не закрываю, пока результата не добьюсь. Я лучше новые вопросы пропущу, но буду в своём ответе уверен.
    – UModeL
    Commented 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
    Commented 24 мар. 2021 в 16:57
  • Это можно решить добавив флаг required после получения/потери фокуса либо когда значение изменяется. Но, да по хорошему нужна более серъезная функция проверки + на сервере Commented 25 мар. 2021 в 2:05

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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