Question

我有需要使用JavaScript验证的表单，我需要同时显示所有邮件。例如，如果要显示两条消息，则缺少名字和确认名称。我已经使用下面的代码，但表单仍然返回到服务器。 P Lease见下文：

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

Answer 1

因为每个人似乎都在提供jQuery答案，而且我没有在你的orignal代码中看到任何jQuery-esque，我假设你没有使用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();
    }

}

Answer 2

您的代码：

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

...会触发异常，但您无法抓住它：

未捕获的TypeError：无法读取属性＆＃39;选项＆＃39;未定义的

因此JavaScript代码停止运行。

Answer 3

尝试类似

的内容

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

返回false不会阻止表单提交

3 个答案: