Проверка, является ли ввод пустым с помощью JavaScript

На прошлой неделе я поделился, как проверьте, пуст ли ввод с помощью CSS. Сегодня поговорим о том же, но с помощью JavaScript.

Это намного проще.

Вот что мы строим:

События для проверки ввода

Если вы хотите проверить ввод, когда пользователь вводит в поле, вы можете использовать input мероприятие.

const input = document.querySelector('input')
input.addEventListener('input', evt => {
  // Validate input
})

Если вы хотите проверить ввод, когда пользователь отправляет форму, вы можете использовать submit мероприятие. Убедитесь, что вы предотвращаете поведение по умолчанию с помощьюpreventDefault.

Если вы не предотвратите поведение по умолчанию, браузеры перенаправят пользователя по URL-адресу, указанному в атрибуте действия.

const form = document.querySelector('form')
form.addEventListener('submit', evt => {
  evt.preventDefault()

  // Validate input
})

Проверка ввода

Мы хотим знать, пуст ли вход. Для нашей цели пустое означает:

1. Пользователь ничего не ввел в поле
2. Пользователь ввел один или несколько пробелов, но не другие символы

В JavaScript условия прохождения/непрохождения могут быть представлены следующим образом:

// Empty
' '
'  '
'   '

// Filled
'one-word'
'one-word '
' one-word'
' one-word '
'one phrase with whitespace'
'one phrase with whitespace '
' one phrase with whitespace'
' one phrase with whitespace '

Проверить это легко. Нам просто нужно использовать trim метод. trim удаляет все пробелы в начале и в конце строки.

const value = input.value.trim()

Если ввод действителен, вы можете установить data-state к valid. Если ввод недействителен, вы можете установить data-state к invalid.

input.addEventListener('input', evt => {
  const value = input.value.trim()

  if (value) {
    input.dataset.state="valid"
  } else {
    input.dataset.state="invalid"
  }
})

/* Show red borders when filled, but invalid */
input[data-state="invalid"] {
  border-color: hsl(0, 76%, 50%);
}

/* Show green borders when valid */
input[data-state="valid"] {
  border-color: hsl(120, 76%, 50%);
}

Это еще не конец. У нас есть проблемы.

Когда пользователь вводит текст в поле, начинается проверка ввода. Однако если пользователь удалит весь текст из поля, введенные данные останутся недействительными.

Мы не хотим сделать ввод недействительным, если пользователь удалит весь текст. Им может понадобиться время, чтобы подумать, но недействительное состояние вызывает ненужную тревогу.

Чтобы исправить это, мы можем проверить, ввел ли пользователь какой-либо текст во ввод, прежде чем мы trim Это.

input.addEventListener('input', evt => {
  const value = input.value

  if (!value) {
    input.dataset.state=""
    return
  }

  const trimmed = value.trim()

  if (trimmed) {
    input.dataset.state="valid"
  } else {
    input.dataset.state="invalid"
  }
})

Вот Codepen для вас, чтобы поиграть:

См. перо Пустая проверка с помощью JavaScript Зелл Лью (@zellwk) на КодПен.

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