@fiddle-digital/string-validation

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.

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

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();

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

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.