Installation

In your Astro project:

npm i @astro-reactive/validator @astro-reactive/form

Usage

Use in an Astro page:

---
import Form, { FormControl, FormGroup } from "@astro-reactive/form";
import { Validators } from "@astro-reactive/validator";

const form = new FormGroup([
  {
    name: "username",
    label: "Username",
    validators: [Validators.required],
  },
  {
    name: "email",
    label: "Email",
    validators: [Validators.email, Validators.required],
  },
  {
    name: "password",
    label: "Password",
    type: "password",
    validators: [Validators.required, Validators.minLength(8)],
  },
]);

// you can insert a control at any point
form.controls.push(
  new FormControl({
    type: "checkbox",
    name: "is-awesome",
    label: "is Awesome?",
  })
);

---

<Form showValidationHints formGroups={form} />
<!-- 
  The `showValidationHints` attribute tells the Form component
  that you want to render validation hints. So far, these are:
    1. asterisks on required controls' labels
    2. controls with errors will become color red

  This property is optional and set to false by default,
  which keeps the Form component unstyled,
  and gives you have the freedom to style it yourself.
-->

👉 For more examples and explanations of the component properties, see the Validators API Docs.

Screenshots

Validators available

1. Validators.min(limit) - checks if number value is greater than or equal to limit
2. Validators.max(limit) - checks if number value is less than or equal to limit
3. Validators.required - checks if value is empty
4. Validators.requiredChecked - checks if value is "checked"
5. Validators.email - checks if value is a valid email
6. Validators.minLength(limit) - checks if value length is greater than or equal to limit
7. Validators.maxLength(limit) - checks if value length is less than or equal to limit

Form component

This validation library is designed to work with Astro Reactive Form, our package for generating dynamic forms.

We are opensource!

👉 All contributions are welcome. Let's make the validation library for Astro.

👉 This package is a work in progress. See the change log.