check box with FormData

기능 요구사항

 

1. 하나의 form tag를 만든다.

2. form tag 안에 좋아하는 음식과 관심사를 여러개 선택할 수 있는 체크 박스를 만든다.

3. form을 제출하면 (type이 submit인 버튼을 누르면) 좋아하는 음식과 관심사가 각각 최소 하나씩

선택되었는지 검사한다.
4. 검사를 무사히 통과했으면 현재 form이 최종적으로 어떤 데이터를 보내려는지 form UI 하단에 보여준다.

---

구현

See the Pen check-box-with-FormData by seorim (@avocado12) on CodePen.

 

form이 전제척으로 어떤 데이터를 다루는지(갯수, 종류 등) 알아내기 위해 이 정보를 formMap 변수에 객체를 만들었다.

핸들러 내부에서 form이 가진 데이터를 확인하기위해서 FormData 인터페이스를 활용했다.

확인 버튼이 클릭되면 데이터 유효성 검사를 한다.

- 위 예제에서는 음식과 관심사가 각각 최소 하나씩 선택되었는지 검사했다.

이때 form tag는 type이 submit인 버튼이 클릭되면 기본적으로 페이지 새로고침을 하는데 이 동작이 불필요하여 event 객체의 preventDefault 함수를 실행했다.

 

참고: https://developer.mozilla.org/ko/docs/Web/API/FormData