오픈마켓) 회원가입 에러메세지 - react-hook-form 버그

0. 버그 현황

아이디 input 값에 20자 이내의 영문,소문자,대문자,숫자만 사용가능하다고 유효성 검사 처리를 react-hook-form 으로 적용. 하지만, 한글을 누르고 중복확인 버튼을 누르면 멋진 아이디네요 :) 라고 성공했다는 메세지가 나온다. react-hook-form 으로 유효성 검사를 하고 중복확인 버튼 적용이 안되게 해야한다.

 

1. 기존 코드

- 전체 코드 중 id 관련된 코드만 추출하였음

  const {
    register,
    handleSubmit,
    getValues,
    setError,
    watch,
    formState: { errors },
  } = useForm({ mode: "onChange" });
  
  
    // id 중복 확인 검증
  const handleCheckId = async (
    id: string,
    e: React.MouseEvent<HTMLButtonElement>
  ) => {
    e.preventDefault();
    const resultAction = await dispatch(fetchIdValidate(id));
    if (fetchIdValidate.fulfilled.match(resultAction)) {
      setIdChecked(true);
    }
  };
  
  
   <JoinInput
            label="아이디"
            forid="id"
            type="text"
            width={346}
            isButton={true}
            onClick={(e) => handleCheckId(getValues("id"), e)}
            {...register("id", {
              required: "필수 정보입니다.",
              pattern: {
                value: regExp.ID_REGEX,
                message:
                  "20자 이내의 영문,소문자, 대문자, 숫자만 사용 가능합니다.",
              },
              onChange: () => {
                if (idChecked) {
                  setIdChecked(false);
                }
              },
            })}
          />
          {idChecked ? (
            <S.SuccessTxt>{successMsg.Success}</S.SuccessTxt>
          ) : (
            RenderErrorMsg(errors.id)
          )}

 

2. 해결 코드

중복 확인 버튼을 클릭할 때, react-hook-form 유효성 검사와 함께 진행하려면 버튼 클릭 이벤트에서 'trigger' 메서드를 사용하여 유효성 검사를 수동으로 호출할 수 있다.

// 먼저 'useForm' 에서 'trigger' 메서드를 가져온다.

const {
  register,
  handleSubmit,
  getValues,
  setError,
  watch,
  trigger,
  formState: { errors },
} = useForm({ mode: "onChange" });

// 'handleCheckId' 함수에서 trigger를 호출하여 아이디 필드의 유효성 검사를 실행한다.
// 유효성 검사를 통과한 경우에만 아이디 중복확인을 진행하도록 한다.

const handleCheckId = async (
  id: string,
  e: React.MouseEvent<HTMLButtonElement>
) => {
  e.preventDefault();

  const isValid = await trigger("id");
  if (!isValid) {
    return;
  }

  const resultAction = await dispatch(fetchIdValidate(id));
  if (fetchIdValidate.fulfilled.match(resultAction)) {
    setIdChecked(true);
  }
};

 

이렇게 수정하면 아이디 중복 확인 버튼을 클릭했을 때 react-hook-form의 유효성 검사와 함께 진행되어 한글 아이디 등의 잘못된 값에 대해 중복 확인이 실행되지 않도록 할 수 있다.

 

 

✅react-hook-form trigger

trigger는 React Hook Form에서 제공하는 함수 중 하나입니다. 이 함수를 사용하면, 특정 필드나 전체 폼에 대한 유효성 검사를 수행할 수 있습니다.

trigger([fieldName: string | string[]])

trigger 함수에 필드 이름을 전달하지 않으면, 전체 폼에 대한 유효성 검사를 수행한다. 필드 이름을 전달하면 해당 필드에 대한 유효성 검사만 수행합니다.

사용 예시

import { useForm } from "react-hook-form";

function App() {
  const { register, handleSubmit, trigger, errors } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input name="email" ref={register({ required: true, pattern: /^\S+@\S+$/i })} />
      {errors.email && <span>This field is required and must be a valid email.</span>}

      <input name="password" type="password" ref={register({ required: true, minLength: 6 })} />
      {errors.password && <span>This field is required and must be at least 6 characters long.</span>}

      <button type="button" onClick={() => trigger()}>Validate Form</button>
      <button type="submit">Submit</button>
    </form>
  );
}

위 코드에서는 두 개의 필드(email, password)를 등록하고, 각 필드에 대한 유효성 검사 규칙을 정의했습니다. trigger 함수는 "Validate Form" 버튼을 클릭할 때 호출됩니다. 이 함수는 전체 폼에 대한 유효성 검사를 수행하며, 검사 결과에 따라 에러 메시지를 렌더링합니다.

trigger 함수는 주로 사용자가 폼을 제출하기 전에 폼의 유효성을 검사하고, 제출 전에 사용자가 모든 필드를 올바르게 입력했는지 확인하는 데 사용됩니다.