Supporting users without JS

This library will support the no-JS use case as long as Remix does. However, the way you go about doing this may vary depending on how important this is to you.

If supporting users without JS is important for you

You should fall back to native browser validation when JS is disabled. This is more work to maintain, but it's a better experience for users.

In order to do this properly, you can pass noValidate to your ValidatedForm when JS is available. A helpful tool for doing that is useHydrated from remix-utils.

const isHydrated = useHydrated();
return <ValidatedForm noValidate={isHydrated} />;

This will allow remix-validated-form to take over validation when it can, but will fall back to native browser validation when it can't.

If users without JS are an edge-case

The primary mechanism remix-validated-form has for supporting users without JS is the second argument of the validationError helper. This does come with some caveats, which you can read more about in the validationError docs.

Most of the time your code will look like this:

const action = async ({ request }: DataFunctionArgs) => {
  const result = await validator.validate(
    await request.formData(),
  );
  if (result.error)
    return validationError(
      result.error,
      result.submittedData,
    );
  // do something with result.data
};

Other Considerations

Using fields outside of a ValidatedForm component

If you're using fields outside of the ValidatedForm component, the default values may not correctly populate. To set default values in a way that works without JS, use setFormDefaults.