The pop-up alert not showing upon successful submission

JavaScript
1

I am making this form by front-end mentors and my alert does not show when I submit my information. Here are both my HTML and CSS code blocks.

function validateForm(event) {
    
    const firstName = document.getElementById("firstname");
    const lastName = document.getElementById("lastname");
    const email = document.getElementById("email");
    const message = document.getElementById("message");
    const terms = document.getElementById("terms");
    const query = document.querySelector('input[name="query"]:checked');
    
    const errorOne = document.getElementById("firsterror");
    const errorLast = document.getElementById("lasterror");
    const errorEmail = document.getElementById("emailerror");
    const errorMessage = document.getElementById("messageerror");
    const errorTerms = document.getElementById("termserror");
    const errorQuery = document.getElementById("queryerror");
    const submissionAlert = document.getElementById("alert");

    let checkIfFormIsValid = true;

    
    if (firstName.value === "") {
        errorOne.style.display = "inline";
        checkIfFormIsValid = false;
    } else {
        errorOne.style.display = "none";
    }

    if (lastName.value === "") {
        errorLast.style.display = "inline";
        checkIfFormIsValid = false;
    } else {
        errorLast.style.display = "none";
    }

    if (email.value === "" || !email.validity.valid) {
        errorEmail.style.display = "inline";
        checkIfFormIsValid = false;
    } else {
        errorEmail.style.display = "none";
    }

    if (!query) {
        errorQuery.style.display = "inline";
        checkIfFormIsValid = false;
    } else {
        errorQuery.style.display = "none";
    }

    if (message.value === "") {
        errorMessage.style.display = "inline";
        checkIfFormIsValid = false;
    } else {
        errorMessage.style.display = "none";
    }

    if (!terms.checked) {
        errorTerms.style.display = "inline";
        checkIfFormIsValid = false;
    } else {
        errorTerms.style.display = "none";
    }

    function submitForm(checkIfFormIsValid){
        if (checkIfFormIsValid){
            submissionAlert.style.display = "block";
        } else{
            submissionAlert.style.display = "none";
        }
    }
    
    return checkIfFormIsValid;

}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png">
  <title>Frontend Mentor | Contact form</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <form id="container" onsubmit="return validateForm()">
    <div class="info">
      <!--Header section-->
      <header>
        <h1>Contact Us</h1>
      </header>

      <!--Names Section-->
      <section class="Names">
        <div class="firstname">
          <label for="firstname">First Name*</label>
          <input type="text" id="firstname" name="firstname">
          <p style="color: red;" id="firsterror">This input field is required</p>
        </div>

        <div class="lastname">
          <label for="lastname">Last Name*</label>
          <input type="text" id="lastname" name="lastname">
          <p style="color: red;" id="lasterror">This input field is required</p>
        </div>
      </section>

      <!--E-mails Section-->
      <section class="email">
        <label for="email">Email Address*</label>
        <input type="email" id="email" name="email">
        <p style="color: red; display: none; font-weight: 700;" id="emailerror">Please enter a valid email address</p>
      </section>

      <!--Query type section-->
      <section class="query">
        <p>Query Type*</p>
        <div class="queries">
          <div class="query-one">
            <input type="radio" name="query" id="query-one" value="General Enquiry">
            <label for="query-one">General Enquiry</label>
          </div>

          <div class="query-two">
            <input type="radio" name="query" value="Support Request"> Support Request
          </div>
        </div>
        <p style="color: red; display: none; font-weight: 700;" id="queryerror">Please select a query type</p>
      </section>

      <!--Message section-->
      <section class="message">
        <p>Message*</p>
        <textarea name="message" id="message"></textarea>
        <p style="color: red; display: none; font-weight: 700;" id="messageerror">This field is required</p>
      </section>

      <!--Terms and conditions-->
      <section class="terms">
        <label for="terms"><input type="checkbox" id="terms">I consent to being contacted by the team*</label>
        <p style="color: red; display: none; font-weight: 700;" id="termserror">To submit this form, please consent to being contacted</p>
      </section>

      <!--Submit Button-->
      <section class="submit">
        <input type="submit" value="Submit" onclick="submitForm()">
      </section>
    </div>
  </form>

  <!--Alert Box-->
  <section id="alert"">
    <h1>Message Sent!</h1>
    <p>Thanks for completing the form. We'll be in touch soon!</p>
  </section>
  <script src="validate.js"></script>
</body>
</html>
2

Hi There is a mistake here <section id="alert""> look at the quote and try validate your html with 3wc validator you can see your mistake.

3

I appreciate your feedback, however, the programme does not solve my problem. It highlights accessibility issues, which I am going to consider on my next deployment.

4

Ok i’ll give this other link MDN form. It’s a complete series how to make and validate a form, I use this when I need.
After I don’t use

onsubmit="return validateForm()"

when I submit a form I can’t say anymore.

I did this :

<form class="form-container" id="myForm" action="./index.html" novalidate>

And in JS:

myForm.addEventListener('submit', () => {your function});

And you can look on this code (Front-end-mentor- Intro-component-with-sign-up-form)form validation
Hope it will help you.

5

I haven’t tried the code yet but my first thought is: the default result of submitting a form is the page gets refreshed and maybe that is why you cannot see any change happen on the page.

Normally we deal with this in JavaScript by calling preventDefault .

So I would try adding event.preventDefault to the validateForm function.

6

I tried adding the event.preventDefault but ran into more problems. The error messages were no longer showing when the input fields were empty and neither did the pop-up.

7

I will take a closer look tomorrow. Because you have a click event on the button and an onsubmit event, you may need to add the preventDefault to both places.
You can also try to remove the onsubmit attribute from the form and force the execution to go through the button click event only which may be easier to debug.

8

Ok, I’ll try the options and let you know if it was fruitful.

9

hi Stephen, I got the form to work for me but I made a few changes.
1- I changed the submit button into a button element.
<button onclick="validateForm()">Submit</button>
2- I changed the onsubmit attribute value of the form to prevent submission
<form id="container" onsubmit="return false;">
3- I removed the return statement at the end of the validateForm and used this code:

submitForm(checkIfFormIsValid);

After this, your alert can be seen after submission but you’ll need to add code to clear the form since the refresh is being prevented.

10

This worked well. I used reset() on the container to clear the form after submission. I am now working on clearing the pop-up after submission, I’m thinking of setting a timeout.

11

I think if you define a class called togglePopup or something like that and make this class have css to hide the popup. Then you can toggle the class itself on the popups to show and hide them.

12

Ok. Let me try that, cause the setTimeout did not work very well.