폼다루기

입력값 가져오기

value — input, textarea, select의 값


const nameInput = document.querySelector("#name");
console.log(nameInput.value); // 입력된 문자열
 
nameInput.value = "gori"; // 값 설정도 가능

checked — checkbox, radio


const agreeCheckbox = document.querySelector("#agree");
console.log(agreeCheckbox.checked); // true / false
 
agreeCheckbox.checked = true;

select의 선택된 값


<select id="city">
  <option value="seoul">서울</option>
  <option value="busan">부산</option>
</select>


const citySelect = document.querySelector("#city");
console.log(citySelect.value); // "seoul" 또는 "busan"

여러 checkbox 중 체크된 것만 모으기


const checked = document.querySelectorAll('input[name="hobby"]:checked');
const values = [...checked].map((el) => el.value);
console.log(values); // ["reading", "movie"]

폼 제출 처리

submit 이벤트 — form 전체에 등록

버튼의 click이 아니라 form의 submit 이벤트를 사용하는 것이 기본이다. 버튼 클릭뿐 아니라 입력창에서 엔터를 눌러도 똑같이 감지되기 때문이다.


<form id="signupForm">
  <input type="text" name="name" />
  <input type="email" name="email" />
  <button type="submit">가입</button>
</form>


const form = document.querySelector("#signupForm");
 
form.addEventListener("submit", (event) => {
  event.preventDefault(); // 새로고침되는 기본 동작 막기
 
  const name = form.name.value;   // form.요소이름 으로도 접근 가능
  const email = form.email.value;
 
  console.log({ name, email });
});

FormData — 폼 전체 값을 한 번에 꺼내기

입력창이 많을 때 하나씩 querySelector로 꺼내는 대신, FormData로 한 번에 정리할 수 있다.


form.addEventListener("submit", (event) => {
  event.preventDefault();
 
  const formData = new FormData(form);
  console.log(formData.get("name"));  // "gori"
  console.log(formData.get("email")); // "gori@example.com"
 
  const data = Object.fromEntries(formData); // 객체로 한번에 변환
  console.log(data); // { name: "gori", email: "gori@example.com" }
});

폼 유효성 검사

HTML 자체 속성으로 기본 검사


<input type="text" required minlength="4" />
<input type="email" required />
<input type="number" min="0" max="100" />

required, minlength, type="email" 같은 속성만으로도 브라우저가 기본적인 검사를 대신해준다. 다만 규칙이 복잡해지면 JS로 직접 검사해야 한다.

JS + 정규표현식으로 유효성 검사

“정규표현식” 글에서 다룬 패턴을 폼 검증에 그대로 적용할 수 있다.


function validateSignup({ id, password, email }) {
  const idRegex = /^[a-z0-9]{4,12}$/;
  const emailRegex = /^[\w.-]+@[\w.-]+\.\w+$/;
 
  if (!idRegex.test(id)) {
    return "아이디는 영문/숫자 4~12자로 입력해주세요";
  }
  if (password.length < 8) {
    return "비밀번호는 8자 이상이어야 합니다";
  }
  if (!emailRegex.test(email)) {
    return "이메일 형식이 올바르지 않습니다";
  }
  return null; // 문제 없음
}

폼 제출과 함께 검사하기


form.addEventListener("submit", (event) => {
  event.preventDefault();
 
  const formData = new FormData(form);
  const data = Object.fromEntries(formData);
 
  const errorMessage = validateSignup(data);
  if (errorMessage) {
    alert(errorMessage);
    return; // 여기서 멈추고 실제 제출은 하지 않음
  }
 
  console.log("검증 통과, 서버로 전송:", data);
});

입력마다 실시간으로 검사하기

제출 시점이 아니라, 타이핑하는 동안 바로바로 알려주고 싶다면 input 이벤트와 함께 쓴다. “비동기” 글에서 다룬 디바운스를 함께 쓰면 매 타이핑마다 검사하지 않고 입력이 멈췄을 때만 검사할 수 있다.


const emailInput = document.querySelector("#email");
const emailError = document.querySelector("#emailError");
 
const checkEmail = debounce(() => {
  const emailRegex = /^[\w.-]+@[\w.-]+\.\w+$/;
  emailError.textContent = emailRegex.test(emailInput.value)
    ? ""
    : "이메일 형식이 올바르지 않습니다";
}, 300);
 
emailInput.addEventListener("input", checkEmail);