為什么我的表單驗證 function 不起作用？

Question

我是新手，所以請耐心等待。 我正在嘗試設置連接到我的 email 客戶端 (Drip) 的簡單表單驗證。 它並不復雜，就像我說的那樣，我正在學習並希望從頭開始這樣做（這就是為什么所有 CSS 和諸如此類的東西都不在單獨的文件中）。 這整個事情是一個學習練習。

與我的 email 客戶端的連接工作正常，但問題是即使所有字段都為空，表單也會提交。 我不知道它是否忽略了腳本，或者它正在運行但不工作，或者......

我不知道。 我錯過了一些東西，但就像我說的，我正在學習，所以我看不到它是為了愛情還是金錢！

有誰能指出我在這里做錯了什么？ :-)

<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>

Answer 1

您可以保持名稱屬性不變。 問題出在您的document.forms[...]表達式中。 它沒有找到預期的輸入元素。 由於這些也被賦予了id屬性，因此將它們用作通過使用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>

Answer 2

我是新手，所以請多多包涵。 我正在嘗試設置一個連接到我的 email 客戶端（Drip）的簡單表單驗證。 就像我說的那樣，它並不復雜，我正在學習並希望從頭開始這樣做（這就是為什么所有 CSS 和諸如此類的東西都不在單獨的文件中的原因）。 這整件事是一個學習練習。

與我的 email 客戶端的連接工作正常，但問題是即使所有字段為空，表單也會提交。 我不知道它是否忽略了腳本，或者它正在運行但不工作，或者......

我不知道。 我錯過了一些東西，但就像我說的，我正在學習，所以我看不到愛情或金錢！

有人能指出我在這里做錯了什么嗎？ :-)

<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>