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시 작동하지 않을 수 있다