return false 不阻止表单提交答案

【问题标题】：Return false does not prevent form submissionreturn false 不阻止表单提交
【发布时间】：2014-04-22 22:11:15
【问题描述】：

我有需要使用 JavaScript 验证的表单，并且需要同时显示所有消息。例如，如果两个消息出现时缺少名字和确定名。我已经使用以下代码进行了此操作，但表单仍在返回到服务器。 P 租见如下：

function validateForm() {
    var flag = true;
    var x = document.forms["myForm"]["firstname_4"].value;
    if (x == null || x == "") {
        document.getElementById("fNameMessage").innerHTML = "First name is  required";
        flag = false;
    } else {
        document.getElementById("fNameMessage").innerHTML = "";
    }

    var x = document.forms["myForm"]["surname_5"].value;
    if (x == null || x == "") {
        document.getElementById("sNameMessage").innerHTML = "Surename is required";
        flag = false;
    } else {
        document.getElementById("sNameMessage").innerHTML = "";
    }
    var y = document.forms["myForm"]["selectid"];
    if (y.options[y.selectedIndex].value == "Title") {
        document.getElementById("titleMessage").innerHTML = "You need to select a title";
        flag = false;
    } else {
        document.getElementById("titleMessage").innerHTML = "";
    }

    return flag;
}

我的表单和事件：

<form action=""method="post" accept-charset="UTF-8" name="myForm" onsubmit="return validateForm();">

我的按钮：

<input type="submit" class="button" name="submit" id="submit" value="Submit">

【问题讨论】：

我相信您的意思是“姓氏”而不是“确定的名字”。（虽然我严重怀疑这与你的问题有关）
您检查浏览器的 JavaScript 控制台是否有错误消息？
您需要帮助才能找到浏览器的 JavaScript 控制台吗？
不抱歉，我收到了这条消息 Uncaught TypeError: Cannot read property 'options' of undefined website_email_sign_up.html:32 validateForm website_email_sign_up.html:32 onsubmit 和 500 的发布错误

标签： javascript forms validation

【解决方案1】：

您的代码：

var y = document.forms["myForm"]["selectid"];
if (y.options[y.selectedIndex].value == "Title")

... 触发了一个异常而你没有捕捉到它：

未捕获的类型错误：无法读取未定义的属性“选项”

因此 JavaScript 代码停止运行。

【讨论】：

【解决方案2】：

由于每个人似乎都在提供 jQuery 答案，而且我在您的原始代码中没有看到任何 jQuery 风格的东西，所以我假设您没有使用 jQuery。

你应该使用 event.preventDefault:

来源：

https://developer.mozilla.org/en-US/docs/Web/API/event.preventDefault

https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement.submit

document.getElementById("submit").addEventListener(
     "click", validateForm, false
);
function validateForm(){

    // We should not assume a valid form! 
    var formValid = false;

    // All your validation code goes here

    if(formValid){
        document.forms["myform"].submit();
    }

}

【讨论】：

【解决方案3】：

试试类似的东西

if(flag){
   document.getElementById("submit").submit();
} 
else{
   $('#submit').click(function (e) {
      e.preventDefault();
   });
}

【讨论】：

根据 validateForm() 有条件地阻止 Default 会更好吗？
请记住，这是一个 jQuery 解决方案，所以如果您不使用 jQuery，这将不起作用。
@user3334690 刚刚根据您的建议编辑了答案。
这一切都在页面的顶部，我已经将您的代码放在函数内部和外部，但都没有工作。你会在哪里建议？
您应该在列出的函数末尾取出 return 并使用那里的代码。并确保包含 jquery 库