JavaScript로 입력이 비어 있는지 확인

지난 주에 check if an input is empty with CSS 방법을 공유했습니다. 오늘은 같은 것에 대해 이야기하지만 JavaScript를 사용합니다.

훨씬 간단합니다.

우리가 만들고 있는 것은 다음과 같습니다.

입력을 검증하는 이벤트

사용자가 필드에 입력할 때 입력의 유효성을 검사하려면 input 이벤트를 사용할 수 있습니다.

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

사용자가 양식을 제출할 때 입력의 유효성을 검사하려면 submit 이벤트를 사용할 수 있습니다. preventDefault 로 기본 동작을 방지했는지 확인하십시오.

기본 동작을 방지하지 않으면 브라우저는 action 속성에 명시된 URL로 사용자를 안내합니다.

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

  // Validate input
})

입력 유효성 검사

입력이 비어 있는지 알고 싶습니다. 우리의 목적상 비어 있다는 것은 다음을 의미합니다.

사용자가 필드에 아무것도 입력하지 않았습니다

.

사용자가 하나 이상의 공백을 입력했지만 다른 문자는 입력하지 않았습니다

.

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은 다음과 같습니다.

Empty validation with JavaScript에서 Zell Liew(@zellwk)의 펜CodePen을 참조하십시오.


읽어 주셔서 감사합니다. 이 기사는 원래 my blog에 게시되었습니다. 더 나은 프런트엔드 개발자가 되는 데 도움이 되는 더 많은 기사를 보려면 my newsletter에 가입하세요.