尽管javascript验证返回false并显示警报消息，表单仍会提交

我有一个表单需要用户填写，空字段将提示JavaScript验证返回一条消息来填写该特定字段。我能够完成这一切，除了返回一条“警报”消息，表单仍然会被提交。我如何避免这种情况？以下是我的JavaScript：

function validateHandAppr(theForm) {

    // Recom or Not Recom  
    if (document.project.rec.selectedIndex == 0) {
        alert("Please Choose the Recommendation Priority .");
        project.rec.focus();
        return false;
    }

    // Recommended priorities 
    if (document.project.rec.selectedIndex == 2 && document.project.recvd_dt.value == "") {

        alert("Fill in the date when culture was received.");
        project.recvd_dt.focus();
        return false;
    }

    if (document.project.rec.selectedIndex == 2 && document.project.recvd_by.value == "") {

        alert("Specify who received the culture.");
        project.recvd_by.focus();
        return false;
    }


    if (document.project.rec.selectedIndex == 2 && document.project.recvd_dt.value != "") {
        var validformat = /^\d{4}\-\d{2}\-\d{2}$/; //.test(project.recvd_dt.value) //Basic check for format validity

        if (!validformat.test(project.recvd_dt.value)) {
            alert("Invalid Date Format. Please enter in the following format: yyyy-mm-dd.")
            return false;
        } else { //Detailed check for valid date ranges
            var yearfield = project.recvd_dt.value.split("-")[0]
            var monthfield = project.recvd_dt.value.split("-")[1]
            var dayfield = project.recvd_dt.value.split("-")[2]
            var dayobj = new Date(yearfield, monthfield - 1, dayfield)
            if ((dayobj.getMonth() + 1 != monthfield) || (dayobj.getDate() != dayfield) || (dayobj.getFullYear() != yearfield)) {
                alert("Invalid Day, Month, or Year range detected. Please correct and submit again.")
                return false;
            } else {
                return true;
            }
        }
    }
}

以下是调用JavaScript的表单：

<form accept-charset="UTF-8" id="project" name="project"
      action="hand_submit_forms.php" method="post"
      onSubmit="return validateHandAppr(this)"
      class="user-info-from-cookie" enctype="multipart/form-data">

---

问题在于这些线路：

project.rec.focus();
// ...
project.recvd_dt.focus();
// ...
project.recvd_by.focus();

您的验证条件引用的是

文档.project

，但上面的几行仅代表

项目

——它并不全局存在，因为它是

文档

的子项，而不是

窗口

，并且您没有在本地声明它

因为这些行位于

alert（）

行和

返回false之间行，您将看到警报，但永远不会到达return语句-因此函数不会返回false，表单将被提交

如果将行更改为：

document.project.rec.focus();
// ...
document.project.recvd_dt.focus();
// ...
document.project.recvd_by.focus();

……应该行得通

然而
您应该将函数分配给
s DOM对象的
submit
事件，而不是使用内联事件处理程序

如果执行此操作，将向函数的第一个参数传递一个事件对象，您可以使用而不是返回
false
。这将避免问题（如果在错误发生之前放置了行），并且通常是更好的处理方法，因为返回
false
也会停止事件的传播，这可能是不需要的-实际上，这在这种特定情况下没有什么区别，但作为一般规则，它是正确的

如果执行此操作，处理程序将在DOM对象的上下文中执行-因此
this
变量将是对它的引用，您不需要将其作为参数传入。
可能是
.focus（）
调用之一导致了错误（我的猜测是，
project.x
对象中的一个由于某种原因不存在）和
false
实际上没有被函数返回将控制台设置为保留登录导航，您将看到一条记录的错误消息，告诉您在这种情况下出现了什么问题。事实上，^^就是问题所在。您的验证条件引用的是
document.project
，但您的
.focus（）
调用reference只是一个不存在的不合格的
项目
对象。嘿，我按照你的建议做了，问题被归类为project.rec.focus（）；但对于其余的检查警报，它仍然存在。感谢您的解释，但您能指出我现在错在哪里吗？Heya我已将更新的代码粘贴到问题中作为编辑，因为注释不能包含更多字符。日期类型未经验证，表单在“指定接收区域性的用户“错误。@Snids OK-首先，您能为表单显示更多的HTML吗？我想查看
document.project.*
引用的表单元素。另外，您是否在控制台中记录了任何错误？如果您使用Chrome，请按F12并转到控制台选项卡，然后右键单击控制台主体并确保选中“保留导航上的日志”选项，然后尝试并重复该错误-您应该会在控制台中看到一条错误消息，该消息将给出验证代码失败的线索。
document.project.rec.focus();
// ...
document.project.recvd_dt.focus();
// ...
document.project.recvd_by.focus();