Overview

StringValidation is a dynamic, client-side form validation library crafted with TypeScript, facilitating the integration of validation directly through HTML data attributes. It enables the development of interactive, user-friendly forms by providing instant feedback on the data entered by users. With support for standard validation rules like email, phone numbers, and custom patterns, as well as input restriction based on these validations, it stands as a robust solution for enhancing form interactivity and ensuring data integrity.

Installation

To include StringValidation in your project, use a package manager:

npm install @fiddle-digital/string-validation

Then, import it in your project:

import { StringValidation } from '@fiddle-digital/string-validation';

Usage

To apply validation, attach data attributes for desired validation rules to your form elements:

<form action="" data-string-validation-form="signup">
  <input type="text" data-string-id="email" data-string-validation="email|Email not formatted correctly;required|Field is required">
  <div data-string-validation-error="email"></div>
  <button type="submit">Submit</button>
</form>

Initialize the validation:

const validation = StringValidation.getInstance();

Validation Rules

StringValidation supports a wide array of validation rules, easily configured via data attributes:

| HTML attribute | Description | |--|--| | data-string-validation | Specifies the validation rules and error messages for the input. | | data-string-id | A unique identifier for connecting input fields with their error display elements. | | data-string-validation-error | Indicates where to display the error message for a specific input. |

Supported Validation Types:

email: Validates email formats. phone: Validates phone numbers with support for country-specific formats. number: Ensures only numerical input is accepted. text: Allows only textual input, excluding numbers. enum: Validates input against a predefined set of values. required: Marks a field as mandatory.