Client side form validation with specific error messages?

[iway1]

In my line of work it's literally always a requirement to have to create forms that have a specific error message for each individual requirement for each field, and to show that error message on that field in the UI.

HTML form doesn't support this, so it doesn't seem like there's a way to do that easily in Remix unless I'm missing something, since I don't have access to any form state.

Any tips on implementing this? I just want to be able to use a zod schema for validation on the client, and show any errors it creates while knowing which form field caused the error.

I've tried some of the existing libraries (remix-forms and remix-validated-form), but their api's are either bad or they just don't actually work correctly in all cases.

[kiliman]

I've tried some of the existing libraries (remix-forms and remix-validated-form), but their api's are either bad or they just don't actually work correctly in all cases.

Not sure that's the best way to approach things when you're asking for help.

Anyway, if you need standard client-side validation, then look at the Constraint Validation API
https://developer.mozilla.org/en-US/docs/Web/API/Constraint_validation

If you need validation with zod, I have a library remix-params-helper. It's primarily server-side validation, but it shouldn't be difficult to check on the client as well.
https://github.com/kiliman/remix-params-helper

[kiliman]

Anyway, sorry you're frustrated. We're here to help, really. Although Remix is fairly easy to learn, it's quite a bit different if all you've done is useState() / e.preventDefault(). So there will be an adjustment period.

Hang in there. Once you really understand Remix, you're going to love web development again.

[brightpixels]

You can still control your form inputs in Remix and apply any pattern that has worked before to show per input error messages

Is this still true if JavaScript is turned off in the browser? Isn’t better to encourage uncontrolled forms since remix is all about progress enhancements? I am fairly new to remix and was surprised by this comment. Thanks

[sergiodxa]

@brightpixels with JS disabled any JS only validation will not work yeah, and while Remix recommends you to try to make your app progressively enhanced it doesn't force you to do so, you could build apps that needs JS to work (sometimes there's no other option).

Also, if you only use client-side JS to validate your inputs, your app could still work for non JS users, they will not get client-side validations but after they submit the form your action must also validate (you must always validate server-side, client-side validations are an UX enhancement) so the user will still get any possible validation error.

[iway1]

@brightpixels

My two cents is this:

The standard for a good form validation UX in any application consists of the following:

1. Front end and backend form validation. (Front end validation leads to a more responsive app).
2. Fields with various validation requirements, where each validation requirement has an error message.
3. A user interface that shows said custom error messages on the input field that failed validation when validation fails (rendered in a custom component)

I'm a consultant, I've built many applications over the years based on designs I get from our design partners. Every. Single. Design wants this exact behavior. And why? Because it's the best UX.

HTML simply does not facilitate this well, neither does Remix. Form state doesn't need to be manually controlled by the developer, a form state library like react-hook-form can do it for them, but it does need to be performed in Javascript, because HTML validation is not a great UX.

So, it's better to just default to a JS solution, because the UX is always better. There's really no argument here IMO. HTML forms have serious shortcomings when it comes to implementing standard UX. Plus, writing form validation in zod is actually a much, much better developer experience than using HTMLs built in validators. Unless I'm missing some other way to do this in Remix? @sergiodxa

BTW, using react-hook-form with Remix is quite easy. It works just fine. My main point is that javascript is actually better for forms than HTML ever was or ever will be. That being said, developers shouldn't be manually managing form state in any scenario

[enyelsequeira]

@iway1 I am wondering if you have an example of using react-hook-form package? I am trying to integrate it right now and could not find anything for it quite yet

Cheers,

[abenhamdine]

FWIW we use remix-validated-forms library, with zod.
We use the provided helpers zod-form-data to coerce formData strings to expected types

and it works perfectly, we can achieve with a single schema front side and server validation

simplified example :

import { zfd } from "zod-form-data"
import { z } from "zod"
import { withZod } from "@remix-validated-form/with-zod"

// example of helpers to coerce/transform formData inputs
export const zfdIntOptional = () => zfd.numeric(z.number().int().optional())
export const zfdStringRequired = (minLength?: number | null, maxLength?: number | null, requiredMsg?: string) => zfd.text(z.string({ required_error: requiredMsg ?? `Cette donnée est obligatoire` }).min(minLength ?? 0).max(maxLength ?? 999999)).transform(v => v ? v.trim() : v)

// then we get a schema and a validator for the form

const params = {
    foo : zfdIntOptional (),
    bar : zfdStringRequired ()
}

const schema = zfd.formData(params)
const validator = withZod(z.object(zodParams))

//  then in action we validate the payload
export const action: ActionFunction = async ({ request }) => {

    const result = await input.validator.validate(request.formData())

   if (result.error) {
       // do what you want with this server error
   }
}
// frontside validation : we passe the validator to the form in the component : 

export default function MyForm() {
  return <ValidatedForm
                validator={validator}
                defaultValues={defaultValues}
            >
   ...
}

I add that first we tried to use react-hook-form but we did not managed to make it work with remix.

[NerdyBoyCool]

Did you remember to put in root.tsx?
In my case, I removed that tag during the tutorial process and client-side validation was not done. (The server-side validation was working fine.) It was a very simple mistake, but I'm glad I could help.