提交后，此表单将不会运行验证脚本

时间：2019-02-08 04:03:43

标签： javascript

我已经尝试了很多次，无法弄清楚为什么我提交此表单时不会激活javascript函数Validate（）。

这几乎是另一种形式的精确副本，即有一个变化：我添加了一个文本区域，并删除了一些复选框。

我真的可以使用一些帮助来解决此问题... 

<div id="MainDivDomID">
    <h1>Send us a message</h1>

    <form id="contactForm" action="#" enctype="multipart/form-data" data-ajax="false" method="post" onsubmit="return Validate()">
        <input name="Source" type="hidden" value="web" />
        <input name="FormID" type="hidden" value="af3031b7-8f0e-433d-b116-6f10f0f231df" />

        <div class="halves">
            <input name="be9953c9-471c-42f4-a1cf-524f5b67fc38_First" type="text" value="" placeholder="First Name" />
            <input name="be9953c9-471c-42f4-a1cf-524f5b67fc38_Last" type="text" value="" placeholder="Last Name" />
        </div>

        <div class="halves">
            <input maxlength="255" name="463a05a6-e700-462d-b43d-0ef5cb793f11" type="text" value="" placeholder="Email" />
            <input name="eae1ba0e-a5b4-423b-985c-dc36a73c45c5" type="text" placeholder="Phone Number" />
        </div>

        <textarea maxlength="255" name="b60680e4-3e46-43a5-b4e8-a21c6363ea0c" placeholder="Message"></textarea>

        <input name="CaptchaAnswer" type="text" placeholder="Please answer the math question..." />
        <img src="https://my.serviceautopilot.com/images/security-question.jpg" alt="" />

        <p>
            <button id="submitButtonText" class="et_pb_button et_pb_bg_layout_dark">Send Message</button>
        </p>
    </form>
</div> 

function Validate() {
    var IsValidated = true;

    if (document.getElementsByName('a7aa41d9-b309-48d7-af97-5a2ce65eb850_First')[0].value.trim() == "") {
        IsValidated = false;
        alert("Please fill out your first name.");
    }
    if (document.getElementsByName('a7aa41d9-b309-48d7-af97-5a2ce65eb850_Last')[0].value.trim() == "") {
        IsValidated = false;
        alert("Please fill out your last name.");
    }
    var re = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
    var email = document.getElementsByName('017b9b5e-5595-4b74-97a2-187f45400b34')[0].value;
    if (email == "" || re.test(email) != true) {
        IsValidated = false;
        alert("Please fill in your email address.");
    }
    if (document.getElementsByName('4a6b6e47-2fac-4cb4-8ca0-e4a3db4c7fc0')[0].value.trim() == "") {
        IsValidated = false;
        alert("Please fill in your phone number.");
    }
    if (document.getElementsByName('b60680e4-3e46-43a5-b4e8-a21c6363ea0c')[0].value.trim() == "") {
        IsValidated = false;
        alert("Please fill in a message.");
    }
    if (document.getElementsByName('CaptchaAnswer')[0].value != "8") {
        IsValidated = false;
        alert("Please answer the math question.");
    }

    if (IsValidated == true) {
        document.getElementById("contactForm").submit();
    } else {
        alert("Please fill out all fields.");
        return false;
    }
}

function CreateEntity() {
    document.getElementById("submitButtonText").value = "create";
    Validate();
}

2 个答案:

答案 0 :(得分：0)

您需要使用e.preventDefault();阻止默认行为，否则它将尝试提交表单

function Validate(e) {
  e.preventDefault();
  var IsValidated = true;

  if (document.getElementsByName('a7aa41d9-b309-48d7-af97-5a2ce65eb850_First')[0].value.trim() == "") {
    IsValidated = false;
    alert("Please fill out your first name.");
  }
  if (document.getElementsByName('a7aa41d9-b309-48d7-af97-5a2ce65eb850_Last')[0].value.trim() == "") {
    IsValidated = false;
    alert("Please fill out your last name.");
  }
  var re = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
  var email = document.getElementsByName('017b9b5e-5595-4b74-97a2-187f45400b34')[0].value;
  if (email == "" || re.test(email) != true) {
    IsValidated = false;
    alert("Please fill in your email address.");
  }
  if (document.getElementsByName('4a6b6e47-2fac-4cb4-8ca0-e4a3db4c7fc0')[0].value.trim() == "") {
    IsValidated = false;
    alert("Please fill in your phone number.");
  }
  if (document.getElementsByName('b60680e4-3e46-43a5-b4e8-a21c6363ea0c')[0].value.trim() == "") {
    IsValidated = false;
    alert("Please fill in a message.");
  }
  if (document.getElementsByName('CaptchaAnswer')[0].value != "8") {
    IsValidated = false;
    alert("Please answer the math question.");
  }

  if (IsValidated == true) {
    document.getElementById("contactForm").submit();
  } else {
    alert("Please fill out all fields.");
    return false;
  }
}

function CreateEntity() {
  document.getElementById("submitButtonText").value = "create";
  Validate();
}
<div id="MainDivDomID">
  <h1>Send us a message</h1>

  <form id="contactForm" action="#" enctype="multipart/form-data" data-ajax="false" method="post" onsubmit="return Validate(event)">
    <input name="Source" type="hidden" value="web" />
    <input name="FormID" type="hidden" value="af3031b7-8f0e-433d-b116-6f10f0f231df" />

    <div class="halves">
      <input name="be9953c9-471c-42f4-a1cf-524f5b67fc38_First" type="text" value="" placeholder="First Name" />
      <input name="be9953c9-471c-42f4-a1cf-524f5b67fc38_Last" type="text" value="" placeholder="Last Name" />
    </div>

    <div class="halves">
      <input maxlength="255" name="463a05a6-e700-462d-b43d-0ef5cb793f11" type="text" value="" placeholder="Email" />
      <input name="eae1ba0e-a5b4-423b-985c-dc36a73c45c5" type="text" placeholder="Phone Number" />
    </div>

    <textarea maxlength="255" name="b60680e4-3e46-43a5-b4e8-a21c6363ea0c" placeholder="Message"></textarea>

    <input name="CaptchaAnswer" type="text" placeholder="Please answer the math question..." />
    <img src="https://my.serviceautopilot.com/images/security-question.jpg" alt="" />

    <p>
      <button type='submit' id="submitButtonText" class="et_pb_button et_pb_bg_layout_dark">Send Message</button>
    </p>
  </form>
</div>

答案 1 :(得分：0)

代码行有一个例外情况

document.getElementsByName('a7aa41d9-b309-48d7-af97-5a2ce65eb850_First')[0].value.trim() == ""

文档中没有任何名称a7aa41d9-b309-48d7-af97-5a2ce65eb850_First，因此[0]是未定义的。

如果您从以下位置更改

if (document.getElementsByName('a7aa41d9-b309-48d7-af97-5a2ce65eb850_First')[0].value.trim() == "") {
    IsValidated = false;
    alert("Please fill out your first name.");
  }

到

 if (document.getElementsByName('be9953c9-471c-42f4-a1cf-524f5b67fc38_First')[0].value.trim() == "") {
    IsValidated = false;
    alert("Please fill out your first name.");
  }

将显示消息“请填写您的名字”。

相关问题
最新问题