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

Question

我已经尝试了很多次，但无法弄清楚为什么当我提交此表单时它不会激活 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();
}

Answer 1

代码行出现异常

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.");
  }

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