React Hook Form Reuired && onInput 속성

[0gunkim]

const requeirFn = (e) => {
    e.target.value = e.target.value.replace(/[^a-z]/, '');
  };
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        className={styles.input}
        type="text"
        placeholder="url"
        onInput={requeirFn}
        {...register('url', {
          max: 0,
          min: 1,
          required: true,
          maxLength: 70,
          pattern: /[a-z]/i,
        })}
      />

리엑트 훅 폼에서 제공해주는 required는 Submit 이벤트가 발생 되었을 때 작동되고, 처음부터 사용자가 입력 할 때부터 제한하게 하려면 onInput속성에 로직이 필요합니다.