registrationformvalidation

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

• 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.

• 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": "[e-mail]"
  },
  {
    "username": "john",
    "email": "[e-mail]"
  }
]

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