[bug] Not rendering any error using ValidationError Component

[reqyo]

Is there an existing issue for this?

• [X] I have searched the existing issues

Formspree React Version

2.4.0

Formspree Core Version

2.8.0

Current Behavior

No error is shown.

Expected Behavior

A validation error should be shown when using the component and there is an error is state.errors.

Steps To Reproduce

Forced an error by providing an invalid form id, passing the state.errors prop to the ValidationErrors component, form.errors having an error within the object, but you will not see anything displayed.

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

Just a note I was using Vite/Astro and CRA to test this, however in the vite/astro version I was using npm and in the React version I was using yarn

[colevscode]

Hi can you provide a code snippet of your form using ValidationError?

[reqyo]

  const [state, handleFormSend] = useForm('xnqrvpgq')

  return (
    <form className="w-full max-w-xl px-4" onSubmit={handleFormSend}>
      <div className="flex md:flex-nowrap mb-6 flex-wrap md:space-x-8 sm:space-x-0">
        <div className="w-full md:w-1/2 mb-6 md:mb-0">
          <label className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
            First Name
          </label>
          <input
            name="first_name"
            className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white"
            id="grid-first-name"
            type="text"
            placeholder="Jane"
            required
          />
        </div>
        <div className="w-full md:w-1/2">
          <label className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
            Last Name
          </label>
          <input
            name="last_name"
            className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
            id="grid-last-name"
            type="text"
            placeholder="Doe"
          />
        </div>
      </div>
      <input className="hidden" type="text" name="_gotcha" />
      <div className="flex mb-6">
        <div className="w-full">
          <label
            htmlFor="email"
            className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
          >
            E-mail
          </label>
          <input
            name="email"
            className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
            id="email"
            type="email"
          />
          <p className="text-gray-600 text-xs italic">
            Some tips - as long as needed
          </p>
        </div>
      </div>
      <div className="flex mb-6">
        <div className="w-full">
          <label className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
            Message
          </label>
          <textarea
            name="message"
            className=" no-resize appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500 h-48 resize-none"
            id="message"
          ></textarea>
        </div>
      </div>
      <div className="md:flex md:items-center">
        <div className="md:w-1/3">
          <button
            className="shadow bg-[#00d0ff] hover:bg-teal-400 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded"
            type="submit"
          >
            Send
          </button>
        </div>
        <div className="md:w-2/3"></div>
      </div>
      <div className="block">
        <ValidationError
          prefix="Email"
          field="email"
          errors={state.errors}
        />
      </div>
    </form>
  )
}```

[colevscode]

Thanks. So ValidationError is used to display the error of either a particular field, or form-wide errors not associated with a particular field.

When you render a validation error, you pass the field it should apply to, or no field if you want to render form-wide errors.

You have the following code at the bottom of your form:

        <ValidationError
          prefix="Email"
          field="email"
          errors={state.errors}
        />

This is going to render just errors for the email field. If you want it to render form-wide errors, like an invalid form id error, you should remove the field="email" line.

If your goal is to render email field errors, I suggest moving the validation error up under the email input.

You can also add validation errors for the other fields by including the field="<name>" property for each, passing the name of the corresponding input. It's best to place them under the respective inputs so that the error is displayed in context.

You can read more in the docs for ValidationError.

[akashhyap]

Hi @colevscode

I have added validation as per the doc. But validation doesn't seems to work for individual fields. It works in general if I do not add any specific field. Here is the code. It would be great if you can have a look at it.

<form onSubmit={handleSubmit} className="form_wrap">
      <div className="grid grid-cols-6 gap-6 my-5">
        <div className="col-span-6 sm:col-span-3">
          <label
            htmlFor="fname"
            className="block text-sm text-gray-700"
          >
           First Name
          </label>
          <input
            id="fname"
            type="fname"
            name="fname"
            className="mt-1 block w-full rounded-md input_form"
          />
          <ValidationError field="fname" errors={state.errors} />
           
        </div>
        <div className="col-span-6 sm:col-span-3">
          <label
            htmlFor="lname"
            className="block text-sm text-gray-700"
          >
           Last Name
          </label>
          <input
            id="lname"
            type="lname"
            name="lname"
            className="mt-1 block w-full rounded-md input_form"
          />
        
        </div>
        <div className="col-span-6 sm:col-span-6">
          <label
            htmlFor="email"
            className="block text-sm text-gray-700"
          >
            Email Address
          </label>
          <input
            id="email"
            type="email"
            name="email"
            className="mt-1 block w-full rounded-md input_form"
            required
          />
          
        </div>
        <div className="col-span-6 sm:col-span-6">
          <label
            htmlFor="c_message"
            className="block text-sm text-gray-700"
          >
            Message
          </label>
          <textarea
            id="c_message"
            name="c_message"
            className="mt-1 block w-full rounded-md input_form"
          />
          <ValidationError
            prefix="c_message"
            field="c_message"
            errors={state.errors}
          />
        </div>
      </div>
      <button
        type="submit"
        disabled={state.submitting}
        className="inline-flex justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
      >
        Submit
      </button>
      <ValidationError errors={state.errors} />
    </form>

Thank you.

[colevscode]

My first question is, do you have any validation rules set up that would display an error? Formspree can only validate rules that are set up in formspree's backend. Custom backend validation rules can be created via the formspree CLI using the fields property in formspree.json. See the help docs on formspree.json.

The other way backend validation rules are created is if you use special fields that have associated implicit validation rules. For example, using the email field will perform email validation. However, I don't see a <ValidationError> for the email field above.

[akashhyap]

Okay, I wasn't aware of setting validation rules at the backend. I will have a look at it.

Thank you.

[isoaxe]

I came across the same problem, also unaware that validation rules need to be set up in the backend. It makes no mention in the docs it seems. It really should. Otherwise you are left thinking it works out of the box.