Custom Validation

 

<div className="col-sm-5">

  <input type="text" className="form-control"  name="code"  id="code"  autoComplete='off'    

    placeholder="Code"  defaultValue={editDetail?.dept_code}  maxLength={5}  minLength={3}   

    readOnly = { history.location.state? "true" : null }    // option

   onChange={(e) => { setValue("code",e.target.value.replace(/[0-9]/ig, "").toUpperCase()); }} 

    ref={ register({ required: true, maxLength:5, minLength:3  }) }  />

</div>

{errors && errors?.code?.type === "required" && (

        <ErrorDiv errorText="Please enter only 3 alphabet characters." />

    )}

    {errors && errors?.code?.type === "minLength" && (

     <ErrorDiv errorText="Please enter minimum 3 alphabet characters." />

    )}

    {errors && errors?.code?.type === "maxLength" && (

    <ErrorDiv errorText="Please enter maximum 5 alphabet characters." />

    )}