RegistrationFormValidation Class

Overview

The RegistrationFormValidation class is a JavaScript utility designed to validate user registration forms. It checks the validity of input fields: username, email, and password. The class fetches existing usernames and emails from a provided REST API and ensures that the new registration doesn't contain duplicates. It also handles displaying appropriate warning messages when the user input is invalid.

Features

• Validates username, email, and password.
• Ensures usernames and emails are not already registered by checking against a REST API.
• Ensures password meets security requirements (length, uppercase, lowercase, digit, special character).
• Provides real-time validation feedback with warning messages.
• Dynamically shows or hides the submit button based on form validation.

Constructor

Parameters

1. element (HTMLElement)
   The form element that contains the input fields and warning boxes for username, email, and password. It should also contain the submit button.

2. api_link (String)
   The URL of the REST API that returns the existing user data in JSON format. The data should be an array of objects, each containing a username and email field.

Required Form Structure

The form structure should include the following elements with the corresponding IDs:

<form id="registrationForm">
  <!-- Username Input -->
  <input type="text" id="username" placeholder="Enter Username" />
  <div id="usernamewarningbox"></div>
  <!-- Email Input -->
  <input type="email" id="email" placeholder="Enter Email" />
  <div id="emailwarningbox"></div>
  <!-- Password Input -->
  <input type="password" id="password" placeholder="Enter Password" />
  <div id="passwordwarningbox"></div>
  <!-- Submit Button (Initially Hidden) -->
  <button type="button" id="registerbtn">Register</button>

  <!-- Warning Boxes (Initially Hidden) -->
</form>

API Response Format The API endpoint should return data in the following format:

[
  {
    "username": "rahul",
    "email": "[email protected]"
  },
  {
    "username": "john",
    "email": "[email protected]"
  }
]

Form Validation

The RegistrationFormValidation class automatically validates the username, email, and password fields as the user types. The form will display warning messages for invalid fields in real-time, guiding the user to correct their input. The submit button will only appear when all fields are valid.

Example Warning Messages

Username:

• "Username already exists. Please choose another one."
• "Username cannot be empty."

Email:

• "Email already registered. Please use another email."
• "Email cannot be empty."
• "Invalid email format."

Password:

• "Password must be at least 6 characters long."
• "Password must contain at least one uppercase letter."
• "Password must contain at least one lowercase letter."
• "Password must contain at least one number."
• "Password must contain at least one special character (@, $, !, %, *, ?, &)."

Example Usage

Include the Form in Your HTML:

Add the following HTML structure to your page:

<form id="registrationForm">
  <!-- Username Input -->
  <input type="text" id="username" placeholder="Enter Username" />
  <div id="usernamewarningbox"></div>

  <!-- Email Input -->
  <input type="email" id="email" placeholder="Enter Email" />
  <div id="emailwarningbox"></div>

  <!-- Password Input -->
  <input type="password" id="password" placeholder="Enter Password" />
  <div id="passwordwarningbox"></div>

  <!-- Submit Button (Initially Hidden) -->
  <button type="button" id="registerbtn">Register</button>

  <!-- Warning Boxes (Initially Hidden) -->
</form>

Initialize the Class:

In your JavaScript, create an instance of RegistrationFormValidation by passing the form element and the API endpoint.

const formElement = document.getElementById("registrationForm");
const apiEndpoint = "https://example.com/api/users";
const registrationForm = new RegistrationFormValidation(
  formElement,
  apiEndpoint
);