submit 이벤트에서 폼 값을 읽고 브라우저 검증과 함께 처리합니다.
폼은 개별 submit 버튼의 click보다 form의 submit 이벤트에서 처리해야 Enter 키 제출도 포함됩니다. FormData에는 name이 있고 활성화된 성공적인 컨트롤의 값이 들어가며, 같은 이름의 checkbox 값은 getAll로 읽습니다. 클라이언트 검증을 통과해도 서버 검증은 반드시 필요합니다.
코드를 읽을 때는 const data=new FormData(form); data.get("name"); 부분부터 찾으세요. 현재 값과 실행 순서를 줄마다 적어 보면 문법을 외우지 않아도 결과를 예측할 수 있습니다.
사용자의 입력이나 브라우저에서 일어난 사건에 반응할 때 사용합니다. 요소가 없거나 권한이 거부되는 경우, 동적으로 추가된 요소까지 같은 흐름에서 처리하세요.
실행하기 전에 예상 결과를 짧게 적은 뒤 email input과 CSS checkbox를 추가하고 유효성 검사를 적용하세요. 실제 출력이 다르면 콘솔에 처음 나타난 오류와 그 직전 값을 차례로 확인하세요.
disabled이거나 name이 없는 입력은 FormData에 포함되지 않습니다. 화면에 보인다는 이유만으로 전송된다고 가정하지 마세요.
직접 바꿔보세요email input과 CSS checkbox를 추가하고 유효성 검사를 적용하세요.