JavaScript를 사용하여 양식 제출

JavaScript로 HTML 양식을 제출할 때는 보통 submit 이벤트를 처리하고 입력값을 확인한 다음, 유효한 데이터를 브라우저가 양식의 action으로 보내도록 합니다. 아래 예제에서는 양식을 만들고 필드 값을 읽으며, 클라이언트 측 유효성 검사로 미완성된 제출을 막습니다. 제출된 데이터를 사용하기 전에 서버에서도 반드시 자체적으로 유효성을 검사해야 합니다. (submit 이벤트; 클라이언트 측 유효성 검사; 서버 측 유효성 검사)

HTML 양식 만들기

각 컨트롤에 name을 지정하세요. 이 값은 제출되는 양식 데이터에서 해당 컨트롤의 키가 됩니다. 각 필드에 접근 가능한 이름을 제공하도록 레이블을 사용하세요. action은 양식을 받을 URL을 지정하고, method는 브라우저가 데이터를 전송할 방식을 선택합니다. POST 요청은 양식 데이터를 요청 본문에 담아 보냅니다. 데이터를 처리하거나 저장하는 방법은 서버가 결정합니다.

<form action="/signup" method="post" id="signup-form">
  <label for="username">Name</label>
  <input id="username" name="username" type="text" required>

  <label for="email">Email</label>
  <input id="email" name="email" type="email" required>

  <button type="submit">Sign up</button>
  <p id="form-message" role="status"></p>
</form>

이 브라우저 페이지 마크업은 정적인 예제입니다. 양식이 유효하고 사용자가 제출 버튼을 누르면 브라우저는 이름이 지정된 컨트롤의 값을 /signup으로 제출합니다.

양식에 접근하기

document.getElementById() 또는 document.querySelector()를 사용해 ID로 양식을 선택할 수 있습니다. 다음 브라우저 코드는 앞의 마크업이 페이지에 이미 있다고 가정합니다. 뒤에 나오는 제출 핸들러에서도 같은 form 참조를 사용하세요.

const form = document.getElementById("signup-form");

이 코드는 양식 요소를 반환합니다. 양식이 파싱되기 전에 스크립트가 실행된다면 스크립트를 양식 뒤에 배치하거나 문서가 준비될 때까지 기다리세요.

JavaScript에서 양식 필드 값 가져오기

양식의 elements 컬렉션을 사용하면 컨트롤을 name으로 가져올 수 있습니다. 각 컨트롤의 현재 텍스트는 단수형 속성인 .value에서 확인할 수 있습니다. 앞의 양식에서 이름과 이메일을 다음과 같이 읽습니다.

const username = form.elements.username.value.trim();

const email = form.elements.email.value.trim();

HTML의 name 속성은 form.elements에서 사용하는 키와 일치해야 합니다. 텍스트를 다듬으면 값을 확인하기 전에 앞뒤 공백이 제거됩니다.

JavaScript에서 양식 필드 데이터 유효성 검사

아래 도우미 함수는 두 필드 문자열에 모두 텍스트가 있는지 확인합니다. 이 함수는 양식에서 읽은 값과 함께 페이지 핸들러가 사용할 수 있는 불리언 값을 반환합니다. 예제 객체에는 이름과 이메일 주소가 들어 있으며, 코드는 해당 값에 대한 결과를 출력하도록 작성되어 있습니다.

function isSignupComplete(username, email) {
  return username.length > 0 && email.length > 0;
}

const sample = { username: "Ada", email: "ada@example.com" };
console.log(isSignupComplete(sample.username, sample.email));

true

브라우저는 양식의 submit 이벤트를 전달하기 전에 required와 type="email"을 확인합니다. 이름이 비어 있거나 이메일 형식이 잘못되면 이 단계에서 거부됩니다. 이 경우 리스너는 실행되지 않고 preventDefault()도 호출되지 않으며, 브라우저가 자체 유효성 검사 메시지를 표시합니다. 공백만 입력한 이름은 required 검사를 통과하므로 아래 리스너에 전달됩니다. 공백을 제거하면 빈 문자열이 되고, 사용자 지정 검사가 preventDefault()로 제출을 막은 뒤 페이지에 자체 메시지를 표시합니다.

페이지 핸들러에서는 선택한 양식에 리스너를 연결하고, 현재 입력값을 사용해 같은 검사를 수행하세요.

form.addEventListener("submit", (event) => { const username = form.elements.username.value.trim(); const email = form.elements.email.value.trim(); const message = document.getElementById("form-message"); if (!isSignupComplete(username, email)) { event.preventDefault(); message.textContent = "Enter your name and email."; return; } message.textContent = "Submitting…"; });

검사를 통과하면 핸들러는 브라우저의 일반적인 양식 제출 흐름을 그대로 둡니다. 검사에 실패하면 event.preventDefault()가 브라우저가 해당 제출을 보내지 못하게 하고, 메시지가 수정해야 할 내용을 알려줍니다. 이는 사용자에게 피드백을 제공하기 위한 클라이언트 측 유효성 검사이지 보안 경계가 아닙니다. 이 페이지나 JavaScript를 거치지 않고도 요청을 보낼 수 있으므로 엔드포인트에서 서버 측 유효성 검사를 해야 합니다.

다른 코드에서 제출을 시작해야 한다면 form.requestSubmit()을 사용하는 편이 좋습니다. 이 메서드는 일반적인 유효성 검사와 제출 이벤트 흐름을 따릅니다. form.submit()을 호출하면 제약 조건 유효성 검사를 실행하거나 submit 이벤트를 전달하지 않고 바로 제출하므로, 이와 같은 리스너는 실행되지 않습니다.