Sign up form validation

Community feedback

• 

  Gaurav Singh•440

  @Gaurav4604Posted almost 2 years ago

  Hi! Your solution looks amazing! 🥳

  I figured out how to solve your issue for repeated animation, on button click.

  I have made a few edits to your code

  function setError(element, message) {
    const parentEl = element.parentElement; //target inputs parent
    const errorMessage = parentEl.querySelector(".error-message"); //target first element in a parent with class 'error', this is the element that will display the error message
  
    errorMessage.innerHTML = message; //add error message into the element designated to display error
  
    parentEl.classList.add("error"); //add error class that changes style and visibility of elements
  
    const errorIcon = parentEl.querySelector(".error-icon");
  
    errorMessage.style.visibility = "visible";
    errorIcon.style.visibility = "visible";
  
    if (parentEl.classList.contains("error")) {
      //should move error icon if submit is clicked but the field is still empty but does not work
      errorIcon.classList.add("animate");
    }
  }
  

  I changed the function to allow dynamic addition of classes, rather than explicitly specifying the same on the element itself (this is just good practice)

  Now, for the main show!

  form.addEventListener("submit", (e) => {
    //this function makes the submit button not reload right after if something is wrong - so if anything is wrong the page will not reload when hitting submit as it normally would
    e.preventDefault();
    const errorIcons = document.querySelectorAll(".error-icon");
    errorIcons.forEach((errorIcon) => errorIcon.classList.remove("animate"));
    setTimeout(() => {
      checkInputs();
    });
  });
  

  Here I initially remove the class animate from error icon (if it exists on the errorIcon classList),

  lastly, I invoke your checkInputs function, inside a setTimeout, this ensures that all the DOM related events are done executing before, the setTimeout codeBlock executes.

  you can understand how the same works, in depth, here

  If you want me to send you the complete solution, just say so! 😄

  0