Estoy creando una página de contacto y el desarrollador principal quiere que use Joi para validar las entradas. Esta es la primera vez que uso este validador de formulario específico. Mi formulario tiene algunas animaciones que deberían activarse cuando el campo del formulario recibe el foco y cuando la entrada del formulario es válida. Mi problema es que Joi parece agregar un valor predeterminado a los campos, por lo que la entrada siempre es válida. ¿Hay alguna manera de evitar que esto suceda?

Aquí está mi código para uno de los formularios de entrada.

 <div className={scss.col}> <input type="text" autoComplete="off" {...register("name", {required: true})}/> <label htmlFor="name" className={scss.labelName}> <span className={scss.contentName}>Name</span> </label> <p className={errors.name ? scss.error : undefined}> {errors.name?.message} </p> </div>

EDITAR: Traté de simplemente declarar un valor predeterminado de nulo para los campos de entrada, pero estoy usando mecanografiado y recibo el siguiente mensaje de error:

El tipo 'null' no se puede asignar al tipo 'string | número | cadena de solo lectura[] | undefined'.ts(2322) index.d.ts(2202, 9): el tipo esperado proviene de la propiedad 'valor' que se declara aquí en el tipo 'DetailedHTMLProps<InputHTMLAttributes, HTMLInputElement>'