Как вывести текст под инпутом, если он пустой?

Question

[thesirvlad]

У меня есть два инпута, мне нужно сделать так, чтобы если они были пустые, то на кнопку нельзя было нажать и под инпутами выводилось "Это поле должно быть заполнено". Я пробовал это повторить, но, к сожалению, ничего не получилось.
Вот как примерно должно выглядеть это.

Comments

[ThunderCat]

required?

Answer 1

[imko]

Никакой скрипт не нужен, просто используй псевдокласс placeholder-shown, очевидно плейсхолдер виден только когда поле пустое, так что можно считать эти вещи эквивалентными, за исключением того что у поля обязателен какой либо плейсхолдер
Ну и все решение сводится к

.my-beautiful-inut__field:placeholder-shown ~ .my-beautiful-input__error-message{
display:block;
}

Ну и чтобы кнопка не жалась достаточно положить инпуты с кнопкой в форму, и указать им атрибут required

Answer 2

[Сергей Соколов]

Для отдельного поля:
Вот пример
Вот статья

Кнопку отключать – держать общую функцию, которая будет проверять каждое из полей, и включать/выключать кнопку через setAttribute("disabled", true) в зависимости от заполненности всех. Слушателем события "input" на каждом из полей вызывать эту функцию.

Answer 3

[Froggyweb]

Для начала можно использовать библиотеку, например https://validatejs.org/ но вообще нужно понимать как это работает. Вот эти подписи вообще может сервер отдавать если не прошла валидация