0

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>
isherwood
  • 58,414
  • 16
  • 114
  • 157
fantombe
  • 1
  • 1
    Does this answer your question? [How to prevent form from being submitted?](https://stackoverflow.com/questions/3350247/how-to-prevent-form-from-being-submitted) Or change input of type submit into button... – ikiK Feb 15 '21 at 19:02

1 Answers1

0

You can keep the name attributes as they are. The problem was within your document.forms[...] expression. It did not find the expected input elements. As these are given id attributes too it seemed an easy fix to use them as a way of identifying the elements by using document.getElementById(...):

function validateForm() {
var x = document.getElementById("drip-full-name").value;
var y = document.getElementById("drip-email").value;
var z = document.getElementById("drip-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;
}
}
<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>
Carsten Massmann
  • 26,510
  • 2
  • 22
  • 43