Astro Reactive Validator
Set up validators for your forms easily.
## Installation
In your [Astro](https://astro.build) project:
```
npm i @astro-reactive/validator @astro-reactive/form
```
## Usage
Use in an Astro page:
```astro
---
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?",
labelPosition: "right",
})
);
---
```
# Screenshots
# Validators available
1. `Validators.min(limit)` - checks if number value is greater than or equal to limit
1. `Validators.max(limit)` - checks if number value is less than or equal to limit
1. `Validators.required` - checks if value is empty
1. `Validators.requiredChecked` - checks if value is "checked"
1. `Validators.email` - checks if value is a valid email
1. `Validators.minLength(limit)` - checks if value length is greater than or equal to limit
1. `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](https://www.npmjs.com/package/@astro-reactive/form), our package for generating dynamic forms.
# We are opensource!
👉 _All [contributions](https://github.com/ayoayco/astro-reactive-library/blob/main/CONTRIBUTING.md) are welcome. Let's make the validation library for Astro._
👉 _This package is under rigorous development. See the [change log](https://github.com/ayoayco/astro-reactive-library/blob/main/packages/validator/RELEASE.md)_.