Validators

The Validators class provides a set of built-in validators that can be used by form controls right out of the box.

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

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

<Form formGroups={form} />

See the documentation for the validators prop here.

Installation

npm i @astro-reactive/validator

Usage

Simply import the Validators class from the @astro-reactive/validator package and use the validators as needed.

Validators.required

The Validators.required validator is used to ensure that a form control has a non-empty value.

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

const form = new FormGroup([
  {
    name: 'username',
    label: 'Username',
    validators: [Validators.required],
  },
]);
---

<Form formGroups={form} />

Validators.requiredChecked

The Validators.requiredChecked validator is used to ensure that a checkbox is checked.

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

const form = new FormGroup([
  {
    name: 'terms',
    label: 'Terms and Conditions',
    type: 'checkbox',
    validators: [Validators.requiredChecked],
  },
]);
---

<Form formGroups={form} />

Validators.email

The Validators.email validator is used to ensure that a form control has a valid email address. It uses a regular expression to validate the email address.

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

const form = new FormGroup([
  {
    name: 'email',
    label: 'Email',
    validators: [Validators.email],
  },
]);
---

<Form formGroups={form} />

Validators.min

The Validators.min validator is used to ensure that the numeric value of form control is greater than or equal to given value.

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

const form = new FormGroup([
  {
    name: 'price',
    label: 'Price',
    type: 'number',
    validators: [Validators.min(8)],
  },
]);
---

<Form formGroups={forms} />

Validators.max

The Validators.max validator is used to ensure that the numeric value of form control is less than or equal to given value.

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

const form = new FormGroup([
  {
    name: 'price',
    label: 'Price',
    type: 'number',
    validators: [Validators.max(8)],
  },
]);
---

<Form formGroups={forms} />

Validators.minLength

The Validators.minLength validator is used to ensure that the length of the value of form control is greater than or equal to given value.

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

const form = new FormGroup([
  {
    name: 'password',
    label: 'Password',
    validators: [Validators.minLength(8)],
  },
]);
---

<Form formGroups={forms} />

Validators.maxLength

The Validators.maxLength validator is used to ensure that the length of the value of form control is less than or equal to given value.

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

const form = new FormGroup([
  {
    name: 'password',
    label: 'Password',
    validators: [Validators.maxLength(8)],
  },
]);
---

<Form formGroups={forms} />