입력 폼에서 사용자가 입력한 값을 검사하는 타이밍에서 방법이 여러개로 나뉜다.

사용자의 input 입력 값을 유효성 검사하는 시간

1. 폼이 제출되었을 때
2. 포커스를 잃었을 때
3. 입력을 하고 있을 때

1. 폼이 제출되었을 때

제출 했을때 유효성 검사를 하는 경우이다. 이 경우에는 좋은 사용자 경험을 제공하기에는 어렵다.

옳지 않은 정보를 입력했을때 바로바로 알려주기에도 어렵고 무엇보다도 잘못된 정보를 제출했을때 사용자가 직접 다시 올라가서 어느 부분이 잘못되었는지 확인해야하는 극강의 회원가입 시간이 될 수도 있기 때문이다. (사용자 : 살려줘요)

<form onSubmit={요기다가 이벤트 핸들러 바인딩}>
	...
</form>

위의 코드처럼 onSubmit을 통해 유효성 검사를 할 수 있다.

2. 포커즈를 잃었을 때

입력 폼을 클릭했다가 다른 곳을 클릭해서 해당 폼의 포커즈를 잃었을 때 유효성 검사를 하는 경우이다. 이 경우는 아까 1번의 경우보다는 조금 나은 사용자 경험을 제공할 수 있다.

얘도 사실 다를바 없다. 제출했을때 유효성 검사를 할때보다는 조금은 빨리 유효성 검사를 해서 사용자에게 이거 틀렸어요를 알려준다. 그렇지만 바로바로 알려주는 것은 아니기 때문에 다른 곳을 클릭해야 정보가 틀렸는지 여부를 알 수 있어서 이것도 최고의 사용자 경험을 제공한다고는 할 수 없다.

<form>
	<input onBlur={요기다가 이벤트 핸들러 바인딩}/>
	...
</form>