react-hook-form Input 입력시 에러 텍스트 표시

Question

react-hook-form을 통하여 유효성 검사를 구현하고 있습니다.제가 기대하는 결과는 Input 필드에 값을 입력시 유효성 체크가 진행되어 하단에 에러 메시지가 나오는 것인데,하단에 저장 버튼을 클릭해야 에러 메시지가 출력됩니다.Chat gpt를 참고해서 수정했는데도 적용이 되지 않습니다.어떻게 해야 할까요?export default function Password(){ const {register, handleSubmit, watch, formState : {isSubmitting, errors}, trigger} = useForm(); const passwordRef = useRef(null); passwordRef.current = watch('new_pw'); const changePwordSubmit = async (data : any) => { const options = { headers : { "Authorization" : '------', } } const body = { ...data, dbidx : sessionStorage.getItem("pid") } try{ const {data, status} = await axios.post(`${API}/dev/405`, body, options) if(status === 200){ alert("성공적으로 변경 되었습니다."); else{ alert("패드워드 변경에 실패하였습니다."); } window.location.reload(); } } catch(e : unknown){ if(e instanceof Error) console.log(e.message) } } return( ) }

맨맨맨 · Answer

useForm 옵션에 mode에 대해서 한번 알아보시면 될듯합니다~!

그린티라떼 · Answer

다음과 같이 수정 진행했습니다.const {register, handleSubmit, watch, formState : {isSubmitting, errors}} = useForm({mode : "onChange"}); ... return( const PasswordSubmitButton = styled(Button)<{disabled : boolean}>` background-color: ${({ disabled }) => disabled ? "#C5C5CC" : "#B80000"}; `Input 태그에 입력시에 에러 메시지가 출력 됩니다.

react-hook-form Input 입력시 에러 텍스트 표시

2개의 답변

Q&A 목록