Form validation

HTML Classic

// Getting elements from the DOM
const nameInput = document.getElementById("name") as HTMLInputElement;
const mobileInput = document.getElementById("mobile") as HTMLInputElement;
const emailInput = document.getElementById("email") as HTMLInputElement;
const errorElement = document.getElementById("error") as HTMLDivElement;
const submitButton = document.getElementById("submit") as HTMLButtonElement;
const contactsTableBody = document.querySelector(
  "#summaryTable tbody",
) as HTMLTableSectionElement;
const noResultElement = document.getElementById("noResult") as HTMLDivElement;
const searchInput = document.getElementById("search") as HTMLInputElement;
const nameColumnButton = document.getElementById(
  "nameColumn",
) as HTMLButtonElement;

// Defining the Contact type
type Contact = {
  name: string;
  mobile: string;
  email: string;
};

// Array to hold all contacts
let contacts: Contact[] = [
  {
    name: "Admin",
    mobile: "9999999999",
    email: "admin@xyzcompany.com",
  },
];

// Function to validate input data
function validateInput(name: string, mobile: string, email: string): string {
  // Name validation
  if (!/^[A-Za-z\s]{1,20}$/.test(name)) {
    return "Name should contain only letters and spaces, and be up to 20 characters long.";
  }

  // Mobile number validation
  if (!/^\d{10}$/.test(mobile)) {
    return "Mobile number should be exactly 10 digits.";
  }

  // Email validation
  const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
  if (!emailRegex.test(email)) {
    return "Invalid email address.";
  }

  // Return an empty string if all validations pass
  return "";
}

// Function to add contact to the table
function addContactToTable(contact: Contact): void {
  const newRow = contactsTableBody.insertRow();
  newRow.insertCell(0).textContent = contact.name;
  newRow.insertCell(1).textContent = contact.mobile;
  newRow.insertCell(2).textContent = contact.email;
}

// Function to display contacts in the table
function displayContacts(filteredContacts: Contact[]): void {
  contactsTableBody.innerHTML = ""; // Clear the table

  if (filteredContacts.length === 0) {
    noResultElement.style.display = "block";
  } else {
    noResultElement.style.display = "none";
    filteredContacts.forEach((contact) => addContactToTable(contact));
  }
}

// Event handler for the add contact button click
submitButton.addEventListener("click", function (event: Event) {
  event.preventDefault(); // Prevent the form from submitting

  // Get values from input fields
  const name = nameInput.value;
  const mobile = mobileInput.value;
  const email = emailInput.value;

  // Validate the input data
  const validationError = validateInput(name, mobile, email);
  if (validationError) {
    errorElement.textContent = validationError;
    errorElement.style.display = "block";
    return;
  }

  // Create new contact object and add to contacts array
  const newContact: Contact = { name, mobile, email };
  contacts.push(newContact);

  // Display updated contacts list
  displayContacts(contacts);

  // Clear the input fields and hide the error message
  nameInput.value = "";
  mobileInput.value = "";
  emailInput.value = "";
  errorElement.style.display = "none";
});

// Event handler for filtering contacts by mobile numbe

HTML FormCSS FormJS Form