Form validation

HTML Classic

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

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

// Function to validate input data
function validateInput(name, mobile, email) {
  // 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) {
  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) {
  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.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 = { 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 number
searchInput.addEventListener("input", function () {
  const searchValue = searchInput.value.trim();
  const filteredContacts = contacts.filter((contact) =>
    contact.mobile.includes(searchValue),
  );
  displayContacts(filteredContacts);
});

// Event handler for sorting contacts by name
nameColumnButton.addEventListener("click", function () {
  const sortedContacts = contacts
    .slice()
    .sort((a, b) => a.name.localeCompare(b.name));
  displayContacts(sortedContacts);
});

// Initial display of contacts
displayContacts(contacts);

HTML FormCSS FormTS Form