Form Validation

Introduction to Form Validation

The FormValidator module within ReqEase equips you with robust tools for validating HTML forms effortlessly. It simplifies the process of setting up validation rules, handling input errors, and ensuring data integrity. In this section, we'll explore the key functionalities of the FormValidator module and its configuration options.

In this section, we'll cover various aspects of form validation using ReqEase:

1. Using Default Constraints

2. Adding Custom Constraints

3. Validating Fields

4. Custom Validation Rules

5. Error Messages and Localization

By the end of this section, you'll have a solid understanding of how to handle form validation effectively with ReqEase.

Form Validator cycle

Form Validator Cycle

Configuring Form Validator

Before we dive into the details, let's examine the configuration options available for the FormValidator. These options allow you to customize its behavior to suit your project's needs:

• validatorsSource : Determines whether to use default constraints, custom constraints, or both for validation rules.

• callbacks : Define custom callback functions for validation events like onSuccess or onFailure.

• defaultConstraints : Includes default validation rules for common scenarios like required fields.

• newConstraints : Allows custom validation rules to be defined, either in addition to or instead of default constraints.

• strings : Customize error and validation messages displayed to users.

• customValidations : Add custom validation functions for specialized validation requirements.

• fieldsValidators : Specify fields to validate and define unique validation rules for each, it's equivalent to adding constraints.

• inputMessageRenderer : Customize the display of validation messages alongside form inputs.

• form : Designate the HTML form element for validation.

• okBtn : Identify the button triggering validation and the subsequent HTTP request.

• validationDuringLoading: Enable field validation while the loading indicator is active (true or false).

• captchaHandlersToRegister : Register captcha handlers to manage captcha validation.

• captcha : Enable or configure captcha validation for the form.

Form and OkBtn Configuration

Form

The form option in the Form Validator module allows you to specify the HTML form element you want to validate. It's particularly useful when you're using the Form Validator independently, without the ReqEase class. This option enables you to apply validation rules to a specific form on your webpage.

You can provide the form option with the HTML form element you want to validate, like so:

const form = document.getElementById('myForm'); // Replace 'myForm' with your form's ID
const formValidator = new FormValidator({
    form: form,
    // ...other configuration options
});

OkBtn

In cases where the okBtn option is not explicitly defined, ReqEase will automatically search for a suitable button element inside the specified form (if defined). This button will serve as the "OK" button, triggering the form validation and subsequent HTTP requests. ReqEase accomplishes this by looking for a submit button or a button with the ID okBtn within the specified form.

This automatic assignment ensures that the form validation process works seamlessly, even when you haven't explicitly provided the okBtn option. It simplifies the setup process and allows you to focus on other aspects of your project.

Here's an example of configuring the okBtn option independently:

const form = document.getElementById('myForm'); // Replace 'myForm' with your form's ID
const okBtn = document.getElementById('mySubmitButton'); // Replace 'mySubmitButton' with your button's ID
const formValidator = new FormValidator({
    form: form,
    okBtn: okBtn,
    // ...other configuration options
});

If you are using Form Validator inside ReqEase, and not alone, you don't have to define the form/okBtn because they are already defined among ReqEase's options.