Simple Form Validation Library in JavaScript

This challenge asks you to build a basic form validation library in JavaScript. Creating such a library is a common task in web development, ensuring user input meets specific criteria before submission, improving data quality and user experience. Your library should provide a clean and reusable way to validate form fields.

Problem Description

You are tasked with creating a JavaScript library called FormValidator that handles form validation. The library should provide a function validateForm which takes a form element as input and returns an object containing validation errors. The library should support the following validation rules:

• Required: Checks if a field is empty.
• Email: Checks if a field contains a valid email address.
• MinLength: Checks if a field's length is at least a specified minimum.
• MaxLength: Checks if a field's length is at most a specified maximum.

The validateForm function should iterate through the form's fields, apply the configured validation rules, and collect any errors in an object. The error object should have the following structure: { fieldName: "error message", ... }. If no errors are found, the function should return an empty object.

Key Requirements:

• The library should be modular and extensible, allowing for easy addition of new validation rules in the future.
• The validation rules should be configurable for each field.
• The library should handle multiple fields with the same validation rules.
• The library should not modify the form element itself (e.g., adding error messages directly to the DOM). It should only return the error object.

Expected Behavior:

• validateForm should return an empty object if the form is valid.
• validateForm should return an object containing error messages for invalid fields.
• Error messages should be clear and informative.
• The library should gracefully handle fields without any validation rules.

Edge Cases to Consider:

• Empty form.
• Form with only valid fields.
• Form with multiple fields having the same validation rules.
• Fields with conflicting validation rules (e.g., minLength of 5 and maxLength of 3). (Prioritize minLength in this case).
• Invalid input types (e.g., trying to apply minLength to a checkbox).

Examples

Example 1:

Input:
<form>
  <input type="text" id="name" required>
  <input type="email" id="email" required>
</form>

const validator = new FormValidator();
const errors = validator.validateForm(document.querySelector('form'));

Output:
{}
Explanation: Both fields are required and present, so the form is valid.

Example 2:

Input:
<form>
  <input type="text" id="username" required minLength="5">
  <input type="password" id="password" required maxLength="10">
</form>

const validator = new FormValidator();
const errors = validator.validateForm(document.querySelector('form'));

Output:
{}
Explanation: Assuming the username is at least 5 characters and the password is at most 10 characters, the form is valid.

Example 3:

Input:
<form>
  <input type="text" id="username" required minLength="5">
  <input type="password" id="password" required maxLength="3">
</form>

const validator = new FormValidator();
const errors = validator.validateForm(document.querySelector('form'));

Output:
{ "password": "Password must be at most 3 characters." }
Explanation: The password field fails the `maxLength` validation. The username is valid.

Constraints

• The library should be written in plain JavaScript (no external libraries).
• The validateForm function should take a DOM form element as input.
• Validation rules should be defined as attributes on the input elements (e.g., required, minLength="5").
• The library should be able to handle forms with up to 100 fields.
• The validation process should complete within 100ms for a form with 100 fields.

Notes

• Consider using regular expressions for email validation.
• Think about how to handle different input types (text, email, password, etc.).
• You can start by implementing only the required rule and then add the others incrementally.
• Focus on creating a clean and well-structured library that is easy to understand and extend.
• The library should be designed to be reusable across different forms.
• You don't need to display the error messages on the page; just return the error object.
• Assume that the required attribute is always present as a string value (e.g., required). Do not need to check if the attribute exists.