From 4c46aa15188d95ff7f4ee6e3e819a9ed6fb03da5 Mon Sep 17 00:00:00 2001 From: Lalit Date: Tue, 6 Dec 2022 00:36:46 +0530 Subject: [PATCH] docs(validator): Added initial docs for validators (#226) --- apps/demo/src/pages/index.astro | 6 + apps/docs/src/config.ts | 1 + .../src/pages/en/api/validator/index.astro | 3 + .../src/pages/en/api/validator/validators.md | 191 ++++++++++++++++++ 4 files changed, 201 insertions(+) create mode 100644 apps/docs/src/pages/en/api/validator/index.astro create mode 100644 apps/docs/src/pages/en/api/validator/validators.md diff --git a/apps/demo/src/pages/index.astro b/apps/demo/src/pages/index.astro index 64fd430..7550c6e 100644 --- a/apps/demo/src/pages/index.astro +++ b/apps/demo/src/pages/index.astro @@ -62,6 +62,12 @@ const form = new FormGroup([ type: "textarea", value: "Nice!", }, + { + name: "terms", + label: "Terms and Conditions", + type: "checkbox", + validators: [Validators.requiredChecked], + }, ]); form.name = "Simple Form"; diff --git a/apps/docs/src/config.ts b/apps/docs/src/config.ts index 1c7441c..cdd3f08 100644 --- a/apps/docs/src/config.ts +++ b/apps/docs/src/config.ts @@ -63,6 +63,7 @@ export const SIDEBAR: Sidebar = { { text: "Form", link: "en/api/form/form-component" }, { text: "FormGroup", link: "en/api/form/form-group" }, { text: "FormControl", link: "en/api/form/form-control" }, + { text: "Validators", link: "en/api/validator/validators" }, ], }, }; diff --git a/apps/docs/src/pages/en/api/validator/index.astro b/apps/docs/src/pages/en/api/validator/index.astro new file mode 100644 index 0000000..4fdeda6 --- /dev/null +++ b/apps/docs/src/pages/en/api/validator/index.astro @@ -0,0 +1,3 @@ + diff --git a/apps/docs/src/pages/en/api/validator/validators.md b/apps/docs/src/pages/en/api/validator/validators.md new file mode 100644 index 0000000..d3e9151 --- /dev/null +++ b/apps/docs/src/pages/en/api/validator/validators.md @@ -0,0 +1,191 @@ +--- +title: Validators +type: class +package: "@astro-reactive/validators" +description: Validator package for @astro-reactive/forms package for providing validation to forms. +layout: ../../../../layouts/MainLayout.astro +--- + +The `Validators` class provides a set of built-in validators that can be used by form controls right out of the box. + +```astro +--- +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)], + }, +]); +--- + +
+``` + +_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. + +```astro +--- +import Form, { FormGroup } from "@astro-reactive/form"; +import { Validators } from "@astro-reactive/validator"; + +const form = new FormGroup([ + { + name: "username", + label: "Username", + validators: [Validators.required], + }, +]); +--- + + +``` + +### `Validators.requiredChecked` + +The `Validators.requiredChecked` validator is used to ensure that a checkbox is checked. + +```astro +--- +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], + }, +]); +--- + + +``` + +### `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. + +```astro +--- +import Form, { FormGroup } from "@astro-reactive/form"; +import { Validators } from "@astro-reactive/validator"; + +const form = new FormGroup([ + { + name: "email", + label: "Email", + validators: [Validators.email], + }, +]); +--- + + +``` + +### `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. + +```astro +--- +import Form, { FormGroup } from "@astro-reactive/form"; +import { Validators } from "@astro-reactive/validator"; + +const form = new FormGroup([ + { + name: "price", + label: "Price", + validators: [Validators.min(8)], + }, +]); +--- + + +``` + +### `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. + +```astro +--- +import Form, { FormGroup } from "@astro-reactive/form"; +import { Validators } from "@astro-reactive/validator"; + +const form = new FormGroup([ + { + name: "price", + label: "Price", + validators: [Validators.max(8)], + }, +]); +--- + + +``` + +### `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. + +```astro +--- +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)], + }, +]); +--- + + +``` + +### `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. + +```astro +--- +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)], + }, +]); +--- + + +```