Why isn't my form validation function working?

I’m new to this, so please bear with me. I’m trying to setup a simple form validation that connects to my email client (Drip). It’s not sophisticated, like I said, I’m learning and want to do so from the ground up (which is why all the CSS and whatnot isn’t in a separate file). This whole thing is a learning exercise.

The connection to my email client works fine, but the problem is the form submits even if all the fields are empty. I don’t know if it’s ignoring the script, or it’s running and just not working, or…

I don’t know. I’m missing something, but like I said, I’m learning, so I can’t see it for love or money!

Is anyone able to point out what I’ve done wrong here? 🙂

<script>
function validateForm() {
    var x = document.forms["myForm"]["fields[first_name]"].value;
    var y = document.forms["myForm"]["fields[email]"].value;
    var z = document.forms["myForm"]["fields[phone]"].value;
    var checkBox1 = document.getElementById("tcpp");
    var checkBox2 = document.getElementById("contactConsent");
    if (x == "") {
        alert("Name must be filled out");
        return false;
    }
    if (y == "") {
        alert("Email must be filled out");
        return false;
    }
    if (z == "") {
        alert("Phone must be filled out");
        return false;
    }
    if (checkBox1.checked == false) {
        alert("Privacy Policy box must be ticked");
        return false;
    }
    if (checkBox2.checked == false) {
        alert("Consent box must be ticked");
        return false;
    }
}
</script>
<form name="myForm" action="https://www.getdrip.com/forms/999130800/submissions" method="post" data-drip-embedded-form="999130800" onsubmit="return validateForm()">
   <div data-drip-attribute="description"></div>
    <input type="hidden" name="tags[]" value="Tag 1" />
    <input type="hidden" name="tags[]" value="Tag 2" />
    <input type="hidden" name="tags[]" value="Tag 3" />
    <div>
      
    <div>
      <span style="font-size: 20px;"><label for="drip-full-name">Full Name</label></span><br>
      <input style="width: 100%; padding: 5px; border-radius: 3px; border-color: #cccccc; border-style: solid;" type="text" id="drip-full-name" name="fields[full_name]" value="" />
  </div>

  <div>
    <span style="font-size: 20px;"><label for="drip-email">Email Address</label></span><br>
      <input style="width: 100%; padding: 5px; border-radius: 3px; border-color: #cccccc; border-style: solid;" type="email" id="drip-email" name="fields[email]" value="">
  </div>

  <div>
    <span style="font-size: 20px;"><label for="drip-phone">Phone Number</label></span><br>
      <input style="width: 100%; padding: 5px; border-radius: 3px; border-color: #cccccc; border-style: solid;" type="text" id="drip-phone" name="fields[phone]" value="">
  </div>
  </div>
      
    <div style="padding-top: 5px;">
    <input type="hidden" name="fields[read_tc_and_pp]" value="no" />
    <input type="checkbox" name="fields[read_tc_and_pp]" id="tcpp" value="yes" />&nbsp;Privacy policy link goes here
    </div>
    <div style="padding-top: 5px;">
    <input type="hidden" name="fields[consent_to_contact]" value="no" />
    <input type="checkbox" name="fields[consent_to_contact]" id="contactConsent" value="yes" />&nbsp;Consent blurb goes here
    </div>
    <div style="padding-top: 5px;">
    <input style="width: 100%; padding: 10px; font-size: 36px; color: #ffffff; background-color: #22B44F; border: 2px solid; border-radius: 5px; font-weight: bold;" type="submit" value="Get Instant Access" data-drip-attribute="sign-up-button" />
  </div>
</form>

43 thoughts on “Why isn't my form validation function working?”

Leave a Comment