Блокировка кнопки отправки формы при незаполненном поле ввода

Содержание

Введение
Структура HTML
CSS Магия
Объяснение
Дополнение
Результат

Введение

В этой статье мы рассмотрим, как заблокировать кнопку отправки формы до тех пор, пока не будет заполнено хотя бы одно поле ввода. Этот метод работает и для нескольких полей ввода при условии, что все они являются прямыми потомками элемента <form>. Использование вложенных блоков-оберток может нарушить работу этого подхода.

Структура HTML

Начнем с структуры необходимого HTML-документа:

<form action="" class="form">
<input type="text" class="form__input" placeholder="type your name..." required>
<button class="form__button">submit</button>
</form>

CSS Магия

Теперь добавим немного магии с помощью CSS:

:root {
--success-color: #319E65;
--error-color: #E8513B;
--white-color: #FFFFFF;
--silver-color: #BDC3C7;
--light-color: #ECF0F1;
}

.form {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
max-width: 50%;
margin: 0 auto;
}

.form__input {
width: 100%;
border-radius: 4px;
border: 1px solid var(--silver-color);
padding: 10px 20px;
transition: all .3s ease-in-out;
}

.form__input:focus {
outline: none;
}

.form__button {
background: var(--light-color);
border-radius: 4px;
border: 1px solid var(--silver-color);
padding: 10px 20px;
color: var(--silver-color);
transition: all .3s ease-in-out;
pointer-events: none;
margin-left: 10px;
}

.form__input:invalid {
border-color: var(--error-color);
}

.form__input:valid {
border-color: var(--success-color);
}

.form__input:valid + .form__button {
border-color: var(--success-color);
background: var(--success-color);
color: var(--white-color);
cursor: pointer;
pointer-events: auto; /* Разрешает клики и события для кнопки */
}

Объяснение

Трюк заключается в использовании псевдоклассов :valid и :invalid, которые управляют валидацией полей ввода. Когда данные в поле ввода отсутствуют, активируется :invalid, что блокирует кнопку. Если данные введены корректно, :valid делает кнопку кликабельной:

.form__input:valid + .form__button {
border-color: var(--success-color);
background: var(--success-color);
color: var(--white-color);
cursor: pointer;
pointer-events: auto; /* Возвращает клик события в исходное состояние */
}

Дополнение

Вы можете дополнить этот пример, добавив стили для различных состояний кнопки и поля ввода, чтобы сделать их более интерактивными и заметными. Также можно добавить JavaScript для дополнительной логики валидации или управления состоянием формы.

Результат

Полный пример кода доступен на CodePen. Вы можете скопировать и адаптировать его для своих проектов.

Этот метод позволяет легко и элегантно управлять состоянием кнопки отправки формы, улучшая пользовательский опыт и предотвращая отправку пустых форм.