New Package: Stimulus Zod Form Validation

1

Hi All

Just published yet another Stimulus typescript package that integrates Zod for client side validation.

import { Application } from "@hotwired/stimulus"
import { FormController, FieldController } from "stimulus-zod-form";
import { z } from "zod";

const PersonSchema = z.object({
  name: z.string().min(3),
  email: z.string().email("invalid_email"),
  addresses: z.array(z.object({ city: z.string() }))
})

const PersonFormController = FormController(PersonSchema);

window.Stimulus = Application.start();
Stimulus.register("form", PersonFormController);
Stimulus.register("field", FieldController);

<form data-controller="form"
  data-form-field-outlet=".form-field"
  data-action="form#submit"
  data-form-error-map-value='{ "invalid_email": "correo inválido", ... }'>

  <div data-form-target="error"></div>

  <div data-controller="field" class="form-field">
   <input name="addresses[0].city"
     data-field-target="input"
     data-action="blur->field#setTouched blur->form#validate" />
   <div data-field-target="error"></div>
  </div>
</form>

Ajai

3 Likes