form submit event, action 유효성

submit 이벤트는 폼을 제출할 때 트리거 되는데, 주로 폼을 서버로 전송하기 전에 내용을 검증하거나 폼 전송을 취소할 때 사용합니다.

한편, form.submit() 메서드는 자바스크립트만으로 폼 전송을 하고자 할 때 사용합니다. submit()메서드는 동적으로 폼을 생성하고 서버에 보내고자 할 때 사용합니다.

submit 메서드

form.submit()을 호출하면 자바스크립트로 직접 폼을 서버에 전송할 수 있습니다.

form.submit() 메서드가 호출된 다음엔 submit 이벤트는 생성되지 않습니다. 개발자가 form.submit()을 호출했다면 스크립트에서 이미 필요한 모든 조치를 했다고 가정하기 때문입니다.

이런 submit 메서드의 특징은 다음과 같이 폼을 직접 만들고 전송하길 원할 때 응용할 수 있습니다.


let form = document.createElement('form');
form.action = 'https://google.com/search';
form.method = 'GET';

form.innerHTML = '<input name="q" value="테스트">';

// 폼을 제출하려면 반드시 폼이 문서 안에 있어야 합니다.
document.body.append(form);

form.submit();

submit 이벤트와 메서드

submit 이벤트는 폼을 제출할 때 트리거 되는데, 주로 폼을 서버로 전송하기 전에 내용을 검증하거나 폼 전송을 취소할 때 사용합니다.

https://ko.javascript.info/forms-submit


<form id="todoForm">
  <input type="text" id="todoInput" placeholder="할 일 입력">
  <button type="submit">제출</button>
</form>


document.getElementById("todoForm").addEventListener("submit", function(event) {
  event.preventDefault(); //기본 동작방지, SPA 에서는 새로고침을 최소화.
  const input = document.getElementById("todoInput").value;
  const validationResult = validateTodoInput(input); // 유효성 검증

  if (validationResult === true) {
    console.log("유효한 입력입니다:", input);
    // 여기에 입력값을 처리하는 로직을 추가할 수 있습니다.
  } else {
    console.error("입력 오류:", validationResult);
  }
});

function validateTodoInput(input) {
  // 유효성 검증 로직...
  // 예: 길이 제한, 한글 포함 여부 등
}

할일 유효성 검증.


function validateTodoInput(input) {
  const isLengthValid = input.length <= 10;
  const containsKorean = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/.test(input);

  if (!isLengthValid) {
    return "할 일은 10자 이내로 입력해야 합니다.";
  }

  if (!containsKorean) {
    return "할 일에는 한글이 반드시 포함되어야 합니다.";
  }

  return true;
}

공백 금지



if (/\s/.test(input)) {
  return "공백을 포함할 수 없습니다.";
}

특수 문자 금지



if (/[!@#$%^&*()_+]/.test(input)) {
  return "특수 문자를 사용할 수 없습니다.";
}

한글 포함 여부



if (!/[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/.test(input)) {
  return "한글이 포함되어야 합니다.";
}

action 과 form의 차이는

action은 속성이고 데이터가 처리될 uri를 지정합니다. ex)nextjs의 서버엑션 함수, 해당 액션을 처리할 프로그램의 주소 등,

form은 이벤트 핸들러로써 해당 폼이 제출 되었을때 일어날 일을 정의합니다. 그렇기에 form 실행후 action이 실행되는것.