Is there a way to validate form without showing errors against each field.

[yohaydy]

When page loads my form may have some partial data already.
I want to validate form with that data and show missing fields in the top alert.
But I don't want to show error under each field until user tries to submit(UX requirement).

Then I have something like:

useEffect(() => {
  form.validate()
}, [])

const showErrors = !submitAttempted

<input name={fields.email.name} />
{showErrors && <div>{fields.email.errors[0]}</div>}

Adding showErrors everywhere does not looks good to me, so was wondering if there are better ways to achieve this.
Thanks.

[edmundhung]

What do you mean missing fields here? If you are referring to all fields errors after the first validation, then Conform seems to doing it jobs for serving you the errors. The idea of displaying it differently based on some conditions is unlikely a concern of Conform.

[yohaydy]

What do you mean missing fields here?

Required fields that does not have value

I thought maybe there is something like
const errors = form.silentValidate() which would return you field errors without populating allErrors.

unlikely a concern of Conform.

Yeah I thought so, just wanted to confirm, thanks.

[edmundhung]

Maybe something like this would help?

function Example() {
    const [form, fields] = useForm({
        onValidate({ formData }) {
            return parseWithZod(formData, { schema })
        }
    })

    const [initialError, setInitialError] = useState(null); 

    useEffect(() => {
        const formData = new FormData(document.forms.namedItem(form.id));
        const submission = parseWithZod(formData, { schema });

        setInitialError(submission.error);
    }, [form.id])


    // ...
}

[yohaydy]

yeah, this approach seems nicer, cool thank you