Front/JavaScript
[JS] form 태그 내 onSubmit 이벤트 사용법
마이구미포포
2022. 7. 15. 02:04
onSubmit 이벤트는 form전송을 하기 전에 입력된 데이터의 유효성을 체크하기 위해 사용하는 이벤트로,
type = "sumbit" 이라는 input을 클릭하면 유효성을 체크하고 true 일 경우 함수 실행한다
따라서 실행할 함수를 return 으로 반환(?)해주어야 한다
const onSubmit = () => {
alert("확인");
return false;
}
return (
<form onSubmit={()=> return onSubmit()} action="./" >
<input type="submit" value="제출" />
</form>
<button> Back </button>
)
submit 할 버튼에 type="submit" 을 꼭 작성해주어야하고,
submit시 실행할 함수 앞에 return 을 써주는 것을 잊지 말아야한다 !!
만약 return 을 쓰지 않고 onSubmit={onSubmit()} 이렇게 작성한다면 데이터가 true 인지 false인지에 관계없이 함수가 submit 하기도 전에 무조건 실행된다
* button 태그는 form 태그 밖에 써준다
* type을 submit이 아닌 button이나 onClick으로 한다면 키보드로 submit시 작동하지 않을 수 있다