Как я могу проверить инпуты на то что их заполнили?

Question

Как я могу проверить инпуты на то что их заполнили? Хочу проверить что пользователь заполнил инпуты которые в div1 и если они не заполнены добавить к ним класс напримиер "erorr" средствами js.

<div class="div1">
  <input name="shirina" type="number" id="shirina" class="test" value>
  <input name="dlina" type="number" id="dlina" class="test" value>
</div>
<div class="div2">
  <input name="shirina-2" type="number" id="shirina-2" class="test" value>
  <input name="dlina-2" type="number" id="dlina-2" class="test" value>
</div>
  <button id="btn">Go</button>

Answer 1

На примере одного input

Получаете желаемый элемент из DOM дерева.
Устанавливаете событие (addEventListener) изменения данных в вашем input.
По условию(в input ничего не введено) добавляется класс error, если поле заполнено, класс удаляется.

const input = document.getElementById('shirina');
input.addEventListener('input', (e) => {
  if (!e.target.value) {
    e.target.classList.add('error')
  } else {
    e.target.classList.remove('error')
  }
});

.error {
  border: 1px solid red !important;
}

.test {
  border: 1px solid grey 
}

<div class="div1">
  <input name="shirina" type="number" id="shirina" class="test error" value>
</div>

Если хотите проверять значение не по событию изменения значения в input, то в нужном вам месте делаете:

const input = document.getElementById('shirina');
if (input.value) {
  // В поле что то введено
} else {
  // В поле ничего не введено
}

Answer 2

и если они не заполнены добавить к ним класс напримиер "erorr" средствами js

для этих и подобных целей давным давно, в далеком далеком консорциуме придумали css псевдоклассы. использовать тут js, всё равно что с пушки по воробьям.

form{display: grid}
input{background: lightblue} /* обычный */
input:valid{background: lightgreen} /* корректный */
input:invalid{background: pink} /* ошибочный */
input:required{border-left: 15px solid red} /* обязательный */

<form>
  <input type='text' required>
  <input type='text' placeholder='text'>
  <input type='number' placeholder='number'>
  <input type='date'>
  <input type='time'>
</form>

p.s. вроде есть и другие, непомню, погуглите если интересно.

впрочем, они раскрашиваются заранее, еще до попыток заполнения... дабы это исправить, псевдоклассы применяйте к классу(пусть будет .checker), а его уже добавляйте к инпутам после ивента onchange.

form{display: grid}
input{background: lightblue} /* обычный */
.checker:valid{background: lightgreen} /* корректный */
.checker:invalid{background: pink} /* ошибочный */
.checker:required{border-left: 15px solid red} /* обязательный */

<form>
  <input onchange='this.classList.add("checker");' type='text' required>
  <input onchange='this.classList.add("checker");' type='text' placeholder='text'>
  <input onchange='this.classList.add("checker");' type='number' placeholder='number'>
  <input onchange='this.classList.add("checker");' type='date'>
  <input onchange='this.classList.add("checker");' type='time'>
</form>

БЛОГ НА HUSL

Как я могу проверить инпуты на то что их заполнили?

Ответы (2 шт):