Как сделать моментальную проверку в <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>
Например, если пользователь в поле "Имя" вводит цифры, то строчка загорается красным сразу же, а не после нажатия кнопки "ОТПРАВИТЬ".