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)],
},
]);
// 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");
---
```
# 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