Is it possible to use optional field with pattern?

[abogacki]

Hi, I've got a question regarding form validation.

If I'd like to create a form with optional field, that includes pattern validation to optional form field like:

const MyForm = () => {
	const initialValues = {
		name: 'John Doe',
	};

	const {
		register,
		handleSubmit,
		formState: { errors, isValid },
	} = useForm({ defaultValues: initialValues, mode: 'onChange' });

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

	const isEmailPattern = /^[_a-z0-9-\+]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9]+)*(\.[a-z]{2,})$/i;

	console.log({ errors, isValid });

	return (
		<form onSubmit={handleSubmit(onSubmit)}>
			<input name="name" ref={register({ required: true })} />
			<input
				name="email"
				ref={register({ required: false, pattern: isEmailPattern })}
			/>
			<input type="submit" disabled={!isValid} />
		</form>
	);
};

On initial render, form is not valid (isValid is false), but all required fields are valid.
After a user starts typing any value in email input and then deletes it, form is not valid - in formState.errors object, under email field there is pattern error.

I would expect not required field to be allowed as empty, and to not proceed with any further validation.
Is this behaviour intended, and if it is, is there easy way to avoid logic in validate, or using libraries like Yup to achieve this?

[bluebill1049]

it's easier to do validate function or schema validation libraries like zod, yup and etc...

[abogacki]

Thank you very much for swift response, looks like im going with external library :)

[LaumiH]

Hi,

I stumbled over this post because I have the same question. Considering I already built the rest of my form with the inbuilt react hook form validation, is it actually possible to have a pattern for an optional field? Thank you!

Cheers,
LaumiH