astro-reactive-form/packages/validator

Astro Reactive Validator
Set up validators for your forms easily.

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)],
  },
]);

// set the name optionally
form.name = "Simple Form";

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

// you can get a FormControl object
const userNameControl = form.get("username");

// you can set values dynamically
userNameControl?.setValue("RAMOOOON");
form.get('is-awesome')?.setValue("checked");
---

<!-- 
  the `formGroups` attribute can take a single FormGroup
  or an array of FormGroup for multiple fieldsets;
  we do a single for now in this example
-->
<Form showValidationHints={true} formGroups={form} />

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