A Contact form with validation

Community feedback

• 

  Roksolana•910

  @RoksolanaVeresPosted 5 months ago

  Hi, I played a bit with your solution and came up with an idea of how to make it work. The problem is that you are using .checkValidity() method to find out whether the form is valid but it doesn't work as you expect, because this method validates the form based on the attributes you use in inputs, like required or min / max. But since you don't use any of them (and for this particular project you don't need to use them), checkValidity() doesn't actually validate anything. So, you need to create your own validation logic for this.

  So, here is how I solved it: first, I deleted your validation if statement (this one):

   if (form.checkValidity()) {
      showSuccess()
    }
  

  and wrote the checkFormValidity function which loops through your error messages and sets formIsValid to true if all the error messages have "hide" class (thus they're all valid), and false if even one of the messages doesn't have the "hide" class. It also resets the form in case it is valid (according to the challenge requirements)

  const errorMessages = document.querySelectorAll(".error-message");
  let formIsValid = false;  // these should go to the global scope at the top of the page
  
  function checkFormValidity() {
    for (let message of errorMessages) {
      if (!message.className.includes("hide")) {
        formIsValid = false;
        break;
      }
      formIsValid = true;
    }
    if (formIsValid) {
      form.reset();
    }
  }
  

  also I deleted your showSuccess function and instead made showSuccessIfFormIsValid which shows the message if the form is valid and hides it otherwise:

  const success = document.querySelector(".success"); // this should go to the global scope at the top of the page
  
  function showSuccessIfFormIsValid() {
    if (formIsValid) {
      success.style.display = "flex";
    } else {
      success.style.display = "none";
    }
  }
  

  Now you include checkFormValidity() and showSuccessIfFormIsValid() to form submission event and it should work:

  form.addEventListener("submit", (e) => {
    e.preventDefault();
    validateInputs();
    checkFormValidity();
    showSuccessIfFormIsValid();
  });
  

  As to the problem with inputs being pushed up by the error messages: you can just use position absolute for the messages, thus they won't influence the layout.

  I tried to be as detailed as possible, but if my explanation is not good enough, you can always ask additional questions. Good luck!

  Marked as helpful

  0

  ---

  

  Caelus•520

  @Caelus111Posted 5 months ago

  @RoksolanaVeres

  I took so much time with this project that I surrendered when the success message didnt work as intended... This answers all my problems, thank you so much, you a life saver!!

  I wanna ask a question, how did you think of the solution of my problem, I am not gonna lie, I thought about using the hide class as a way to verify that all the inputs are good but didnt give it that much thinking.

  anyway thank you for the thorough answer, I appreciate your hard work. 👍

  1

  

  Roksolana•910

  @RoksolanaVeresPosted 5 months ago

  @Caelus111 Oh, I'm happy that it helped :) Looks stunning!

  Honestly, I don't think that checking the validity of a form through classes in error messages is the best possible option, but in your particular case, it was the first idea that came to my mind and doesn't require much code rewriting.

  If I started from the very beginning, I would probably choose another approach. I would write some statements to check the validity of each particular field, for example, something like this:

  let firstNameIsValid = firstNameInput.value.trim() !== "";
  let lastNameIsValid = lastNameInput.value.trim() !== "";
  ... etc
  

  and then when you press the submit button, you verify the validity of the form by checking if all your statements are truthy (in other words if all the inputs are valid)

  let formIsValid = firstNameIsValid && lastNameIsValid && emailIsValid ...
  

  something like that

  But I'm also still learning, so definitely don't take my words as a single source of truth😅

  One more thing: I've noticed that you overuse fieldset tag. According to mdn, <fieldset> is used to group several controls as well as labels (<label>) within a web form, thus it's great to use it in the Query Type block to group these radio buttons together, but there is no need to wrap every single label and input into a fieldset

  1

  

  Caelus•520

  @Caelus111Posted 5 months ago

  @RoksolanaVeres Oh it did really help, thanks for all the information about the other way of verification and the fieldset one.

  I will try to remember these next time, I stemble against a verification challenge or form validation in general.

  Anyway thank you for your time and advices. 😁

  1

  

  Roksolana•910

  @RoksolanaVeresPosted 5 months ago

  @Caelus111 Forgot to mention one more important issue: on my screen your form is cut, I can't see the top of it. You need to fix the height on main

  currently you have this:

  main {
  ...
      height: 100vh;
  }
  

  you can simply use min-height with the same value instead of just height:

  main {
  ...
      min-height: 100vh;
  }
  

  and maybe add some paddings on top and bottom to separate a form a bit

  0

  

  Roksolana•910

  @RoksolanaVeresPosted 5 months ago

  @Caelus111 You're welcome!

  0

  

  Caelus•520

  @Caelus111Posted 5 months ago

  @RoksolanaVeres is there any difference between them?

  0

  

  Roksolana•910

  @RoksolanaVeresPosted 5 months ago

  @Caelus111 Yes, there is a difference. When you set, for example, height:100vh, the container will be exactly that height and won't get larger even if the content of that container requires more space. The content that doesn't fit will be simply cut off. But if you set min-height:100vh, the container will have a minimum of 100vh, but if the content is larger, the height of the container will also increase and won't cut off the content.

  1