HTML 폼에서 required 속성을 가진 필드의 유효성 검사

by

HTML 폼에서 사용자로부터 정보를 수집할 때, 필수 입력 필드에 데이터를 제공하도록 유도하고 싶을 때가 있습니다. 이를 위해 HTML5에서는 required 속성을 사용할 수 있습니다. 이 속성을 사용하면 브라우저가 자동으로 필드가 비어 있는지 확인하고 제출을 막아줍니다. 그러나 JavaScript를 사용하여 이러한 필드의 유효성을 더 세밀하게 체크하고 사용자 정의 로직을 추가할 수 있습니다.


필수 입력 필드 지정하기

우선 HTML 폼에서 필수 입력 필드를 지정하는 방법을 살펴봅시다. 아래는 이름과 이메일을 입력받는 폼의 예시입니다.

<form id="myForm">
  <label for="name">이름:</label>
  <input type="text" id="name" name="name" required>

  <label for="email">이메일:</label>
  <input type="email" id="email" name="email" required>

  <input type="submit" value="제출">
</form>

위의 코드에서 required 속성은 필수 입력 필드를 정의합니다. 사용자가 이 필드를 빈 채로 제출하려고 할 때 브라우저는 자동으로 유효성 검사를 수행하고 제출을 막아줍니다.


JavaScript를 사용한 유효성 검사

HTML의 기본 유효성 검사만으로는 부족한 경우가 있습니다. JavaScript를 사용하여 더 세밀한 유효성 검사를 수행할 수 있습니다. 아래는 JavaScript 코드를 사용하여 유효성 검사에 실패한 필드를 동적으로 처리하는 방법을 보여줍니다.

<script>
  const form = document.getElementById('myForm');

  form.addEventListener('submit', function(event) {
    // 필드 유효성 검사
    if (!form.checkValidity()) {
      // 필수 입력 필드 중 하나 이상이 비어있거나 유효하지 않을 경우
      alert('모든 필수 입력 필드를 작성해주세요.');
      
      // 유효성 검사 실패한 필드를 선택하고 강조 표시
      const invalidFields = document.querySelectorAll('input:invalid');
      invalidFields.forEach(field => {
        field.style.border = '2px solid red';
      });

      event.preventDefault(); // 제출을 막음
    }
  });
</script>

위의 코드에서는 다음과 같은 작업을 수행합니다.

  1. form 요소를 JavaScript로 가져옵니다.
  2. form 요소에 submit 이벤트 리스너를 추가합니다. 이 이벤트는 폼이 제출될 때 실행됩니다.
  3. 이벤트 리스너 내에서 form.checkValidity() 메서드를 사용하여 필드의 유효성을 확인합니다. 이 메서드는 모든 필수 입력 필드가 유효하면 true를, 하나라도 유효하지 않으면 false를 반환합니다.
  4. 필드의 유효성 검사 결과에 따라 경고 메시지를 표시하고 event.preventDefault()를 사용하여 제출을 방지합니다.


CSS를 사용한 필드 강조 표시

또한 CSS를 사용하여 유효성 검사에 실패한 필드를 시각적으로 강조할 수 있습니다. 아래 코드는 input:invalid 선택자를 사용하여 유효성 검사 실패한 필드에 빨간 테두리를 추가합니다.

<style>
  /* 유효성 검사 실패한 필드에 스타일을 추가하여 강조 표시 */
  input:invalid {
    border: 2px solid red;
  }
</style>



결론

HTML 폼에서 required 속성을 사용하여 필수 입력 필드를 정의하고, JavaScript와 CSS를 활용하여 유효성 검사를 더 세밀하게 수행하고 필드를 강조 표시할 수 있습니다. 이를 통해 사용자로 하여금 필수 정보를 입력하도록 유도하고, 입력 오류를 방지할 수 있습니다.


Leave a Comment