title: How can I validate this form before submitting it?
body: <p>I have been searching across google and stack overflow and I cannot find an answer. So i'm hoping to get some help here.</p>
  <p>I have this form and I need to make sure everything is valid in it before submitting. What they want is to display a message ONLY ONCE everything is valid then you can submit it, so the button is null until then more or less.</p>
  <p>I have not done something like this before so this is somewhat new to me, I tried using a conditional statement with a bunch of and/or conditions. That does not seem to be working, I really do not know what else to try, because I'm used to the form validating once the submit button has been hit.</p>
  <p>Thanks for any help!</p>
  <p>This is where im at so far:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const firstName = document.querySelector("#first_name");
  const lastName = document.querySelector("#last_name");
  const phoneNumber = document.querySelector("#phone");
  const emailInput = document.querySelector("#email");
  const howDidYouHearLabel = document.querySelector("#how_did_you_hear_label");
  const howDidYouHearMenu = document.querySelector("#how_did_you_hear_menu");
  const pleaseSpecify = document.querySelector("#please_specify");
  const pleaseSpecifyLabel = document.querySelector("#please_specify_label");
  const promoInput = document.querySelector("#promo_code");
  const termsAndConditionsLink = document.querySelector("#terms_and_conditions_link");
  const zeroDisplay = document.querySelector("#zero");
  const popUpBox =  document.querySelector("#popUpBox");
  const hidePopUp = document.querySelector("#hide");
  const validationMessage = document.querySelector("#validation_message");
  
  
  function validateForm(firstName, lastName, phone, email, promo) {
    if( firstName.value &amp;&amp; lastName.value != null
        &amp;&amp; phone.value === phone.value.replace(/[^\d]/,'') 
        &amp;&amp; email.value === /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/.test(email.value) 
        &amp;&amp; promo.value === /^[a-z0-9]+$/i.test(promo.value)) {
      
        validationMessage.style.color = 'blue';
    }
  };
  
  document.addEventListener("keyup", validateForm(firstName, lastName, phoneNumber, emailInput, promoInput));
  
  // Makes sure a valid email address was entered 
  emailInput.addEventListener("input", (e) =&gt; {
    const emailInputValue = e.currentTarget.value;
    if( /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/.test(emailInputValue) != true) {
        emailInput.style.border = "thin solid red";
    } else {
        emailInput.style.border = "";
    }
  });
  
  // Makes sure a valid promo code was entered
  promoInput.addEventListener("input", (e) =&gt; {
      const promoInputValue = e.currentTarget.value;
      if( /^[a-z0-9]+$/i.test(promoInputValue) != true) {
          promoInput.style.border = "thin solid red";
      } else {
          promoInput.style.border = "";
      }
    });
  
  // Checks to see if a promo code has been entered or not, adds or removes required class as needed
  promoInput.addEventListener('input', (e) =&gt; {
    if (promoInput.value === '') {
      howDidYouHearMenu.required = true;
      howDidYouHearLabel.classList.add("required")
    } else {
      howDidYouHearMenu.required = false;
      howDidYouHearLabel.classList.remove("required")
    }
  });
  
  // If the "Other" option is selected in the select menu, then "Please specify" becomes required, else it is not required
  howDidYouHearMenu.addEventListener('change', (e) =&gt; {
    if(howDidYouHearMenu.value === "Other") {
      pleaseSpecifyLabel.style.display = 'block';
      pleaseSpecify.style.display = 'block';
      pleaseSpecify.required = true;
      pleaseSpecifyLabel.classList.add("required");
    } else {
        pleaseSpecifyLabel.style.display = 'none';
        pleaseSpecifyLabel.classList.remove("required");
        pleaseSpecify.style.display = 'none';
        pleaseSpecify.required = false;
    }
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h6 id="validation_message"&gt;You did it!&lt;/h6&gt;
      &lt;form id="contact_form" name="contact_form" method="POST"&gt;
        &lt;fieldset&gt;
          &lt;legend&gt;Contact Details&lt;/legend&gt;
  
          &lt;label for="first_name" class="required"&gt;First name:&lt;/label&gt;
          &lt;input type="text" required id="first_name" name="first_name" placeholder="First name" maxlength="30"&gt;
  
          &lt;label for="last_name" class="required"&gt;Last name:&lt;/label&gt;
          &lt;input type="text" required id="last_name" name="last_name" placeholder="Last name" maxlength="30"&gt;
  
          &lt;label for="phone" class="required"&gt;Phone:&lt;/label&gt;
          &lt;input type="tel" required onkeyup="this.value=this.value.replace(/[^\d]/,'')" id="phone" name="phone" placeholder="Phone number" maxlength="30"&gt;
  
          &lt;label for="email" class="required"&gt;Email:&lt;/label&gt;
          &lt;div id="email_div"&gt;
            &lt;input type="email" required name="email" id="email" placeholder="Email" maxlength="50"&gt;
            &lt;label for="email" id="email_text"&gt;This field is required in order to receive an email confirmation.&lt;/label&gt;
          &lt;/div&gt;
  
          &lt;label for="promo_code" id="promo_code_label"&gt;Promo Code:&lt;/label&gt;
          &lt;input type="text" name="promo_code" id="promo_code" placeholder="Promo code" maxlength="7"&gt;
  
          &lt;label for="how_did_you_hear_menu" class="required" id="how_did_you_hear_label"&gt;How did you hear:&lt;/label&gt;
          &lt;select required name="how_did_you_hear_menu" id="how_did_you_hear_menu"&gt;
            &lt;option value="Social Media"&gt;Social Media&lt;/option&gt;
            &lt;option value="From a friend"&gt;From a friend&lt;/option&gt;
            &lt;option value="Email"&gt;Email&lt;/option&gt;
            &lt;option value="Other"&gt;Other&lt;/option&gt;
          &lt;/select&gt;
  
          &lt;label for="please_specify" id="please_specify_label"&gt;Please specify:&lt;/label&gt;
          &lt;textarea hidden name="please_specify" id="please_specify" rows="4" placeholder="Please specify" maxlength="255"&gt;&lt;/textarea&gt;
  
          &lt;div id="terms_and_conditons_div"&gt;
            &lt;div id="zero" style="display:none"&gt;&lt;/div&gt;
            &lt;div id="text"&gt;
              &lt;input type="checkbox" required name="terms_and_conditions" id="terms_and_conditions"&gt;
              &lt;a href=# target="_self" id="terms_and_conditions_link" class=" required" required&gt;I agree to the terms and conditions of this event.&lt;/a&gt;
              &lt;div id="popUpBox" style="display:none"&gt;
                &lt;a id="hide" href=# target="_self" class="right"&gt;x&lt;/a&gt;
                &lt;p&gt; All cancellation requests must be received by March 1, 2022 &lt;/p&gt;
                &lt;p&gt; All cancellation requests are subject to a $100 cancellation fee.&lt;/p&gt;
                &lt;p&gt;No one under the age of 16 will be allowed on the show floor. &lt;/p&gt;
              &lt;/div&gt;
           &lt;/div&gt;
  
        &lt;/fieldset&gt;
        &lt;input type="submit" id="form_submit_btn" value="Submit"&gt;
      &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>