Astro Reactive Validator
Set up validators for your forms easily.
In your Astro project:
npm i @astro-reactive/validator @astro-reactive/form
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.
Validators.min(limit)- checks if number value is greater than or equal to limitValidators.max(limit)- checks if number value is less than or equal to limitValidators.required- checks if value is emptyValidators.requiredChecked- checks if value is "checked"Validators.email- checks if value is a valid emailValidators.minLength(limit)- checks if value length is greater than or equal to limitValidators.maxLength(limit)- checks if value length is less than or equal to limit
This validation library is designed to work with Astro Reactive Form, our package for generating dynamic forms.
👉 All contributions are welcome. Let's make the validation library for Astro.
👉 This package is a work in progress. See the change log.