Reference

ReqEase Module

{
    form: HtmlFormGeneralElement,
    okBtn: HtmlButtonGeneralElement,
    formValidator: FormValidationOptionsEntered,
    requester: RequesterOptionsEntered,
    buildMode: BuildMode | BuildModeString;
}

1. form: HtmlFormGeneralElement

• Description: This option represents the HTML form element that ReqEase will handle. You can provide the form element using various methods such as selecting it by its id, using a DOM element, or selecting it with jQuery.

• Example:

  // Using an element's ID
  form: document.getElementById('myForm')
  
  // Using a DOM element directly
  form: document.querySelector('.my-form')
  
  // Using jQuery
  form: $('.my-form')

2. okBtn: HtmlButtonGeneralElement

• Description: Specifies the button element that triggers the form submission when clicked. Similar to the form option, you can provide this element using its id, a DOM element, or jQuery selection.

• Example:

  // Using an element's ID
  okBtn: document.getElementById('submitButton')
  
  // Using a DOM element directly
  okBtn: document.querySelector('.submit-button')
  
  // Using jQuery
  okBtn: $('.submit-button')

3. formValidator: FormValidationOptionsEntered

• Description: The formValidator option contains a variety of settings related to form validation. It allows you to configure how form validation behaves.

• Example:

  formValidator: {
      validatorsSource: ValidatorsSource.FULL, // Use all available validators
      callbacks: {
          onSuccess: () => {
              // Custom logic for validation success
          },
          onFailure: () => {
              // Custom logic for validation failure
          },
      },
      defaultConstraints: [], // Default constraints for all forms
      newConstraints: [],     // Constraints specific to this form
      strings: {
          format: {
              defaultInvalid: "Invalid format"
          },
          // Define other custom validation messages
      },
      // Add other validation options...
  }

4. requester: RequesterOptionsEntered

• Description: The requester option is used to configure settings related to sending requests. It allows you to specify how data should be sent to the server, handle responses, and manage loading indicators.

• Example:

  requester: {
      modalHandlersToRegister: [ModalHandler], // Register modal handlers
      useReadyModal: false,                    // Disable the use of a ready modal
      fields: 'auto',                         // Automatically detect fields
      requestData: {},                        // Data to send in the request
      // Configure other request-related options...
  }

5. buildMode: BuildMode | BuildModeString

• Description: This option specifies when ReqEase should build the form. It can be set to build the form on initialization (BuildMode.onInit) or rebuild it every time (BuildMode.everytime) it's requested.

• Example:

  buildMode: BuildMode.onInit // Build the form on initialization

Types Used in ReqEase

HtmlFormGeneralElement

• Description: Represents an HTML form element. You can use this type to reference form elements in the DOM.

• Example:

  const formElement = document.getElementById('myForm');

FormValidationOptionsEntered

• Description: Configuration options for form validation. This type allows you to specify various settings related to validation, including validation source, callbacks, constraints, custom messages, and more.

• Example:

  const formValidatorOptions = {
      validatorsSource: ValidatorsSource.FULL,
      callbacks: {
          onSuccess: () => { /* ... */ },
          onFailure: () => { /* ... */ },
      },
      // Configure other validation options...
  };

ValidatorsSource

• Description: An enum type that provides options for specifying the source of validators. You can choose between using all available validators (ValidatorsSource.FULL) or only the defined ones (ValidatorsSource.ONLY_DEFINED).

• Example:

  const validationSource = ValidatorsSource.FULL;

ValidatorCallbacks

• Description: This interface defines callback functions for validation success and failure. You can use these callbacks to perform actions when validation passes or fails.

• Example:

  const callbacks = {
      onSuccess: () => { /* ... */ },
      onFailure: () => { /* ... */ },
  };

FormValidatorStrings

• Description: Custom strings for validation messages. You can define specific messages for various validation scenarios, such as format, length, required fields, and CAPTCHA.

• Example:

  const strings = {
      format: {
          defaultInvalid: "Invalid format"
      },
      length: {
          defaultTooShort: "Value is too short",
          defaultTooLong: "Value is too long",
          // Define other custom length-related messages...
      },
      required: "This field is required",
      captcha: {},
  };

CustomValidation

• Description: A custom validation function that takes a callback as an argument. You can implement custom validation logic and use the callback to indicate whether validation succeeded or failed.

• Example:

  const customValidation = (callback) => {
      // Your custom validation logic here
      const isValid = true; // Replace with your validation logic
      callback(isValid);
  };

FieldValidatorEntered

• Description: Specifies validators for form fields. This type allows you to define constraints and the corresponding field elements that should be validated.

• Example:

  const fieldValidator = {
      constraint: {
          presence: true,
          length: {
              minimum: 3,
              maximum: 10,
          },
      },
      field: document.getElementById('myField'),
  };

InputMessageRenderer

• Description: Custom renderer for input messages. You can define how validation messages are displayed for form inputs, including logic for building, rendering, and removing messages.

• Example:

  const inputMessageRenderer = {
      buildMessage: (messageRenderer, message, messageData) => {
          // Your custom message rendering logic here
      },
      // Implement other message rendering functions...
  };

RequesterOptionsInterface

• Description: Configuration options for sending requests. This type allows you to specify modal handlers, data to send, callbacks for responses, and more.

• Example:

  const requesterOptions = {
      modalHandlersToRegister: [ModalHandler],
      useReadyModal: false,
      fields: 'auto',
      requestData: {},
      // Configure other request-related options...
  };