как сделать моментальную проверку input?
Как сделать моментальную проверку в <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>Например, если пользователь в поле "Имя" вводит цифры, то строчка загорается красным сразу же, а не после нажатия кнопки "ОТПРАВИТЬ".
Ответы (2 шт):
Автор решения: UModeL
→ Ссылка
Для этого есть специальный псевдокласс:
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>
Автор решения: Daniil Loban
→ Ссылка
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>