How To - 빈 필드에 대한 JS 검증

w3.css

빈 필드에 대한 JS 검증

JavaScript를 사용하여 빈 입력 필드에 대한 양식 유효성 검사를 추가하는 방법을 알아보자.

빈 입력에 대한 폼 검증

1단계) HTML 추가

<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post" required>
  Name: <input type="text" name="fname">
  <input type="submit" value="Submit">
</form>

2단계) JavaScript 추가

입력 필드(fname)가 비어 있으면 이 함수는 메시지를 알리고 false를 반환하여 양식이 제출되지 않도록 한다.

function validateForm() {
  var x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("Name must be filled out");
    return false;
  }
}

기본 예시

예제 보기