JavaScript로 빈 입력 필드에 대한 폼 유효성 검사 추가하는 방법

JavaScript에서 빈 입력 필드에 대한 폼(양식) 유효성 검사를 추가하려면 onsubmit 이벤트 핸들러와 간단한 자바스크립트 함수를 활용하면 됩니다. 사용자가 필수 입력란을 비운 채로 폼을 제출하려고 할 때 경고 메시지를 표시하고 제출 동작을 차단하는 방식입니다.

예제 코드

<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>JavaScript 빈 입력 필드 유효성 검사 예제</h1>
<form name="Form1" onsubmit="return emptyValidation()">
Name: <input type="text" name="firstName" />
<input type="submit" value="Submit" />
</form>
<h2>입력 필드를 비운 상태로 제출해 보세요</h2>
<script>
function emptyValidation() {
    var formField = document.forms["Form1"]["firstName"].value;
    if (formField == "" || formField == null) {
        alert("Name must be filled out");
        return false;
    }
}
</script>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

JavaScript로 빈 입력 필드에 대한 폼 유효성 검사 추가하는 방법

입력 필드를 비운 상태로 폼을 제출하면 아래와 같이 경고창이 나타나며 제출이 중단됩니다.

JavaScript로 빈 입력 필드에 대한 폼 유효성 검사 추가하는 방법

코드 설명

document.forms["Form1"]["firstName"].value를 통해 이름 입력 필드의 현재 값을 가져옵니다. 값이 빈 문자열("")이거나 null이면 alert()으로 사용자에게 알리고 false를 반환합니다. onsubmit="return emptyValidation()"에서 반환값이 false이면 브라우저는 폼을 서버로 전송하지 않으므로, 빈 필드 제출이 자동으로 차단됩니다.