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>

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

  1. I fixed the problem, I believe that what was causing this was the name of the fields, you were using [] in the names, this is not good practice, you have to use concise names. I don’t really know if that’s the problem, but changing the name of the fields, made your code work

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    
        <script>
            function validateForm() {
                var x = document.forms["myForm"]["fname"].value;
                var y = document.forms["myForm"]["email"].value;
                var z = document.forms["myForm"]["phone"].value;
                var checkBox1 = document.getElementById("tcpp");
                var checkBox2 = document.getElementById("contactConsent");
                if (x == "") {
                    alert("Name must be filled out");
                    return false;
                }
    
                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>
    </head>
    
    <body>
    
        <form name="myForm" action="https://www.getdrip.com/forms/999130800/submissions" method="POST"
            data-drip-embedded-form="999130800" onsubmit="return validateForm()" method="post">
            <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="fname" 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="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="phone" value="">
                </div>
            </div>
    
            <div style="padding-top: 5px;">
                <input type="hidden" name="read_tc_and_pp" value="no" />
                <input type="checkbox" name="read_tc_and_pp" id="tcpp" value="yes" />&nbsp;Privacy policy link goes
                here
            </div>
            <div style="padding-top: 5px;">
                <input type="hidden" name="consent_to_contact" value="no" />
                <input type="checkbox" name="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>
    
    </body>
    
    </html>

    If something goes wrong, you can count on me, comment here and I will help you in any way possible.

    IDEAS FOR THE FUTURE

    Try to use classes instead of inline styles, it’ll make your code easier to understand and save time.

    Do not trust only in JavaScript form validation, it is not secure. You should learn some languages such as PHP to work with the development in the server-side, and then you will have a system more secure.

    Learn more

      HTML Classes

      Is it safe to validate form on client-side only?

    Reply

Leave a Comment