docs(validator): Added initial docs for validators (#226)

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";

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

apps/docs/src/pages/en/api/validator/index.astro

@@ -0,0 +1,3 @@
+<script is:inline>
+  window.location.pathname = `/en/api/validator/validators`;
+</script>

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)],
+  },
+]);
+---
+
+<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.
+
+```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],
+  },
+]);
+---
+
+<Form formGroups={form} />
+```
+
+### `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],
+  },
+]);
+---
+
+<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.
+
+```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],
+  },
+]);
+---
+
+<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.
+
+```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)],
+  },
+]);
+---
+
+<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.
+
+```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)],
+  },
+]);
+---
+
+<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.
+
+```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)],
+  },
+]);
+---
+
+<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.
+
+```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)],
+  },
+]);
+---
+
+<Form formGroups={forms} />
+```