Simplify Form Validation with FormGuardJS: A Lightweight and Flexible Solution

When building web applications, form validation is a crucial task. It ensures that user inputs are valid and meet the expected criteria, preventing errors and improving user experience. However, managing form validation can sometimes be cumbersome, especially when working with large forms or complex validation rules. This is where FormGuardJS comes in — a lightweight and flexible JavaScript library that simplifies the process.
Visit our website FormGuardJS

What is FormGuardJS

FormGuardJS is a small, efficient library designed to make form validation easier and more flexible. It allows developers to define multiple validation rules for each form field, display custom error messages, and integrate with any project effortlessly. Whether you're building a login form, contact form, or a complex data-entry form, FormGuardJS provides a simple solution to validate form inputs with ease.

Key Features

Multiple Validation Rules:
FormGuardJS allows you to combine various validation rules like required, email, minLength, maxLength, numbers, symbols, and more. You can ensure that a field meets multiple conditions in one line of code. For example, you can easily validate that an email field is not only required but also follows a valid email format.

Asynchronous and Synchronous Validation:
FormGuardJS supports both asynchronous and synchronous validation, making it flexible for real-world applications. Whether you're checking a username against a remote database or verifying a simple email format, FormGuardJS handles it seamlessly, ensuring optimal performance with your form validation.

Custom Error Messages:
Tailor the error messages for each field to match your application's needs. This customization enhances user experience by providing clear, specific feedback when validation fails. With FormGuardJS, you can set messages for each validation rule and ensure they align with your app's tone.

Three Ways to Include Validation Rules:
You can define validation rules in three different ways:

1. Inline rules: Directly in the HTML with the data-rules attribute (e.g., data-rules='{"required": true, "minLength": 6}').

2. External URL: Load validation rules from an external JSON file via a URL (e.g., data-rules='https://example.com/rules.json').

3. Local paths: Reference a local JSON file for your validation rules (e.g., data-rules='username.json').

Lightweight:
FormGuardJS is designed to be extremely lightweight, weighing only a few KBs. This ensures your website or application remains fast and responsive, regardless of the size of your project.

Easy Integration:
Integrating FormGuardJS into your project is easy. You can either include it directly through a CDN or install it using npm. It works seamlessly in any environment, from simple websites to large-scale applications.

Password Strength Checker:
FormGuardJS includes built-in password strength validation, allowing you to ensure that users set strong passwords. The password rules include checks for capital letters, small letters, numbers, and special symbols.

Flexible Error Placement:
Customize where error messages appear in relation to your form fields. With the data-error-placement attribute, you can choose between placing errors after, before, or inline with the input fields.

Cross-Framework Compatibility:
FormGuardJS is framework-agnostic, which means it works with React, Angular, or even vanilla JavaScript. Whether you're building a complex single-page app or a simple static site, FormGuardJS integrates smoothly.

Getting started

Getting started with FormGuardJS is quick and simple. Here’s how you can use it:

1. Include via CDN: If you don’t want to use npm, you can include the FormGuardJS library directly via a CDN link:

<script src="https://cdn.jsdelivr.net/gh/Jishith-MP/formguardjs@V1.1.2/dist/FormGuardJS.build.js"></script>

1. Install via npm: If you prefer using npm, you can install it with the following command:

npm install formguard-js

1. Using FormGuardJS: Once you've included the library, you can start using it for form validation. Here’s a simple example:

eg: Initialisation

const form = document.querySelector('#myForm');
const validator = new FormGuard(form, {
    onSubmit: () => {
        // Display a success message after form submission
        alert("Form submitted successfully!");
    }
});

eg: rules

<input type="password" name="username" data-rules='{"required": true, "maxLength": 5, "minLength": 2, "password":
    {"numbers": 3, "capitalLetters": 5, "smallLetters": 4, "symbols": 2},
    "messages": {"required": "This field is required", "maxLength": "Maximum characters allowed are 5"}}'>

In this example, FormGuardJS validates this password input box (making sure it's required and contains all required password criteria). The form will not submit until the field pass the validation.

Why choose FormGuardJS

There are many form validation libraries out there, but FormGuardJS stands out for a few key reasons:

Simplicity: Unlike other validation libraries, FormGuardJS doesn’t overwhelm you with complex configuration or unnecessary features. It’s designed to do one thing — form validation — and do it well.

Flexibility: Whether you need to validate a simple email or a complex form with multiple fields and rules, FormGuardJS has you covered. You can easily customize validation rules and error messages to suit your project’s needs.

Minimalistic Approach: It's built with performance in mind. By being lightweight, FormGuardJS helps you maintain fast load times and keep your codebase clean.

Use Cases for FormGuardJS

FormGuardJS is ideal for any project that involves forms. Here are some common use cases:

Login and Signup Forms: Validate usernames, emails, and passwords with multiple rules such as required, email pattern, minLength, and url pattern, password strength check etc...

Contact Forms: Ensure users enter valid information, such as email addresses or phone numbers, with minimal effort.

Surveys and Feedback Forms: Quickly validate multiple form fields, such as radio buttons, checkboxes, and input fields, ensuring that all required information is captured.

Data-Entry Forms: If you have a form with complex fields (such as dates, phone numbers, or zip codes), FormGuardJS can easily handle all the validation logic.

Conclusion

FormGuardJS is the perfect tool for developers looking for a simple, lightweight solution for form validation. It’s easy to integrate, highly customizable, and helps ensure your forms are error-free with minimal effort. Whether you’re working on a small project or a large-scale application, FormGuardJS can help you streamline the form validation process and improve your app’s user experience.

For more information, visit the official website at FormGuardJS, and explore the documentation at Documentation page for detailed setup instructions and examples.

You can also check out the source code and contribute to the project on the GitHub repository. Your contributions and feedback are welcome!

Happy coding! ✨