Contact Form

Community feedback

• 

  P

  Habeeb Kareem•690

  @olaide-hok

  Posted 4 months ago

  Great job here!

  Some areas to improve the UI are:

  1. The checkbox and radio input type color can be updated by adding css rule to the selector below:

  .container form .query-control .radio-group input {
  accent-color: #0c7d69;
  }
  

  2. The radio-group can be wrapped in a single div and given a display of flex with a flex-direction set to column for mobile and on tablet and above viewport, it is then set to row. This approach can be utilized for the first and last name input fields as well.

  For your JS:

  1. Code Duplication: There is repeated code for adding/removing the error class and toggling error messages. This can be refactored into reusable functions. You can create helper functions for adding/removing errors:

  const showError = (element, errorElement) => {
    element.classList.add("error");
    errorElement.classList.remove("d-none");
  };
  
  const hideError = (element, errorElement) => {
    element.classList.remove("error");
    errorElement.classList.add("d-none");
  };
  

  Use these functions to simplify the validation logic:

  if (!fName.value) {
    showError(fName, document.querySelector(`#fname + span`));
    success = false;
  }
  

  2. Email Validation: The email validation regex (/^\w+@[a-zA-Z_]+.[a-zA-Z]{2,3}$/) is too restrictive. It doesn’t account for valid email formats like user.name+tag@domain.co.uk. You can use a more robust regex for email validation:

  const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
  

  3. Error Message Handling: The code does not clear all errors when the form is reset or when the user starts typing again. You can create a function to clear all errors such as:

  const clearErrors = () => {
    const errorElements = document.querySelectorAll(".error-message");
    errorElements.forEach((element) => element.classList.add("d-none"));
  
    const inputElements = document.querySelectorAll("input, textarea");
    inputElements.forEach((element) => element.classList.remove("error"));
  };
  

  Then call this function in the change event listener:

  myForm.addEventListener("change", clearErrors);
  

  Overall, well done!

  00

  Marked as helpful