@andresclua/validate

Form Validation Library

A lightweight JavaScript utility for validating form fields like email and username. This example demonstrates how to integrate and use the library to ensure inputs meet specified criteria.

Why Choose This Library?

This validation library is designed with flexibility, modularity, and ease of use in mind. Here are the key reasons why it stands out:

Framework-Agnostic

This library is framework-agnostic, meaning it works seamlessly with any JavaScript environment:

• Use it in plain JavaScript for lightweight projects.
• Integrate it into frameworks like React, Vue, Svelte, or Angular.
• Ideal for modern frontends or traditional setups.
• Focused purely on validation; DOM manipulation or custom message handling is left to developers.
• Includes built-in debugging tools to log detailed validation steps for easier troubleshooting.
• Supports real-time validation (e.g., on blur, input, or change events).
• Written in pure JavaScript with no dependencies, ensuring fast performance.
• Ready for use in ES Modules, CommonJS, or browser environments.

Modular Design

Each validation function is a self-contained module, allowing you to:

• Import only the functions you need, keeping your project lightweight.
• Extend or modify specific validations without affecting others.
• Scale effortlessly by adding new validators.

import { isEmail } from "@andresclua/validate";
import { isString } from "@andresclua/validate";

Customizable

The library allows extensive customization to suit your project requirements:

• Define your own error messages with customMessage.
• Configure validations for specific needs like corporate emails or pattern-based rules.

isEmail({
    element: "[e-mail]",
    config: {
        type: "corporate",
        customMessage: "Please use a corporate email address.",
    },
});

Flexible Validation Flow

The library supports multiple ways to handle validation:

• On blur: Validate inputs as the user interacts with them.
• On submit: Validate all inputs when the form is submitted.
• Combined flow: Use both for a robust user experience.

document.querySelector("#email").addEventListener("blur", () => {
    const result = isEmail({ element: emailInput.value });
    if (!result.isValid) {
        console.error(result.errorMessage);
    }
});

Examples

• Validate Email Learn how to validate email addresses with various rules and customizations.

• Validate Number Explore number validation, including range, positivity, and custom rules.

• Validate String Explore String Validation, with configurable rules such as length, pattern matching.

• Validate Select Explore select Validation, with configurable rules such as required, pattern matching,etc.

• Validate Checkbox Explore checkbox Validation, with configurable rules such as required, pattern matching,etc.

• Validate Radio Explore Radio Validation, with configurable rules such as required, pattern matching,etc.

• Validate File Explore RadFileio Validation, with configurable rules such as required, file format,etc.

Do you need to validate an entire form?

For a more robust solution suited to complex projects, refer to the Validate form documentation. You can also explore the src folder for clearer, more practical examples.