diff --git a/docs/form-validation.md b/docs/form-validation.md index 04ed208..e6cedcc 100644 --- a/docs/form-validation.md +++ b/docs/form-validation.md @@ -1,5 +1,5 @@ --- -sidebar_position: 4 +sidebar_position: 5 title: Form Validation --- diff --git a/docs/input-validation.md b/docs/input-validation.md index 7d0a992..c5e41f4 100644 --- a/docs/input-validation.md +++ b/docs/input-validation.md @@ -1,5 +1,5 @@ --- -sidebar_position: 3 +sidebar_position: 4 title: Input validation --- diff --git a/docs/rules/index.md b/docs/rules/index.md index 5e554e2..2baa193 100644 --- a/docs/rules/index.md +++ b/docs/rules/index.md @@ -542,7 +542,7 @@ The `endWithString` rule checks if the input string ends with a specified substr ``` -# How to add or modify a new rule in Trivule? +## Add or modify a new rule in Trivule? Let's say the `required` rule doesn't meet your requirements. You want to customize its behavior or add a new rule. The `rule` method of the `TrBag` class is here for that. diff --git a/docs/validation-mode.md b/docs/validation-mode.md new file mode 100644 index 0000000..fa11f76 --- /dev/null +++ b/docs/validation-mode.md @@ -0,0 +1,81 @@ +--- +sidebar_position: 3 +title: Validation modes +--- + +**Trivule** offers two main modes of validation: declarative validation and imperative validation. + +## Declarative Validation +Declarative validation allows you to use HTML attributes to validate a form without writing any JavaScript code. This approach is intuitive and particularly suitable for simple projects that do not require conditional validation. + +Trivule uses HTML attributes to configure and customize form validation. These attributes, all of which start with `data-tr`, provide a simple and intuitive approach to defining validation rules, events, error messages, CSS classes, and other features related to form field validation. Here are the most commonly used Trivule attributes: + +1. **`data-tr-rules`**: + - **Purpose**: Define the validation rules for a form field. + - **Example**: `` + +2. **`data-tr-events`**: + - **Purpose**: Specify the trigger events for form field validation. + - **Example**: `` + +3. **`data-tr-messages`**: + - **Purpose**: Define custom error messages for a form field. + - **Example**: `` + +4. **`data-tr-invalid-class` and `data-tr-valid-class`**: + - **Purpose**: Define CSS classes to apply to a form field based on its validation state. + - **Example**: `` + +5. **`data-tr-auto`**: + - **Purpose**: Enable or disable automatic validation during input. + - **Example**: `` + +6. **`data-tr-feedback`**: + - **Purpose**: Specify a feedback element associated with a form field. + - **Example**: `` + +7. **`data-tr-submit`, `data-tr-enabled-class`, and `data-tr-disabled-class`**: + - **Purpose**: Configure the form submission button in relation to validation and apply corresponding CSS styles. + - **Example**: `` + +8. **`data-tr-name`**: + - **Purpose**: Change the field's name in the error message. + - **Example**: `` + +9. **`data-tr-lang`**: + - **Purpose**: Specify the language used for error messages and Trivule's user interface elements. + - **Example**: `
...
` + +## Imperative Validation +Imperative validation provides advanced validation capabilities, allowing for conditional operations and modifications in real-time based on user interactions. This approach is ideal for forms where validation rules may change dynamically. + +```javascript +const trivuleForm = new TrivuleForm("form", { + feedbackSelector: ".invalid-feedback", + realTime: true, +}); + +trivuleForm.make({ + email: { + rules: ["required", "email", "maxlength:60"], + feedbackElement: ".invalid-feedback", + }, +}); + +trivuleForm + .get("email") + .appendRule({ + rule: "endWith:@gmail.com", + }) + .removeRule("maxlength"); +``` + +#### Advanced Operations +Whether you choose declarative or imperative mode, the validation instance you create remains available for performing advanced operations such as: +- Changing rules +- Adding rules +- Removing rules +- Styling +- Interacting with events, etc. + + \ No newline at end of file diff --git a/docusaurus.config.js b/docusaurus.config.js index baaeb15..410476e 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -136,7 +136,7 @@ const config = { copyright: `Copyright © ${new Date().getFullYear()} Trivule`, }, prism: { - theme: prismThemes.github, + theme: prismThemes.oneDark, darkTheme: prismThemes.dracula, }, }),