@astro-reactive/validator

0.5.0 • Public • Published

Astro Reactive Library Logo
Astro Reactive Validator
Set up validators for your forms easily.

Package information: NPM version Package information: NPM license Package information: NPM downloads Package information: NPM dependencies status

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

// 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.

Screenshots

Screen Shot 2022-10-15 at 1 31 11 PM

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

Form component

This validation library is designed to work with Astro Reactive Form, our package for generating dynamic forms.

We are opensource!

👉 All contributions are welcome. Let's make the validation library for Astro.

👉 This package is a work in progress. See the change log.

Readme

Keywords

Package Sidebar

Install

npm i @astro-reactive/validator

Weekly Downloads

3

Version

0.5.0

License

MIT

Unpacked Size

14.1 kB

Total Files

7

Last publish

Collaborators

  • aayco