如何进行同时显示错误消息的 JavaScript 表单验证答案

【问题标题】：How to make a JavaScript form validation that displays an error message simultaneously如何进行同时显示错误消息的 JavaScript 表单验证
【发布时间】：2014-01-15 03:30:22
【问题描述】：

我是一名新的 JavaScript 程序员，正在尝试使用 JavaScript 制作表单验证器，但如果所有表单都未填写，则错误消息似乎不会显示，也就是说，如果所有表单都是空的，则只会显示名称表单错误.

这是我尝试过的：

function myValidate() {
    var x = document.forms["myform"]["name"].value;
    var y = document.forms["myform"]["country"].value;
    var z = document.forms["myform"]["occupation"].value;
    var a = document.forms["myform"]["status"].value;

    if (x == "null" || x == "") {
        var b = document.getElementById("nameErr");
        b.innerHTML = "Name Must Be Filled Out";
        return false;
    } else {
        var b = document.getElementById("nameErr");
        b.innerHTML = "";
        return true;
    }

    if (y == "null" || y == "") {
        var c = document.getElementById("countryErr");
        c.innerHTML = "Country Must Be Filled Out";
        return false;
    } else {
        var c = document.getElementById("countryErr");
        c.innerHTML = "";
        return true;
    }

    if (z == "null" || z == "") {
        var d = document.getElementById("occupationErr");
        d.innerHTML = "Occupation Must Be Filled Out";
        return false;
    } else {
        var d = document.getElementById("occupationErr");
        d.innerHTML = "";
        return true;
    }

    if (a == "null" || a == "") {
        var e = document.getElementById("statusErr");
        e.innerHTML = "Status Must Be Filled Out";
        return false;
    } else {
        var e = document.getElementById("statusErr");
        e.innerHTML = "";
        return true;
    }
}

这是 JavaScript 代码。

<form action="process.php" method="post" onsubmit="return myValidate()" name="myform">
    Name:
    <input type="text" id="name" name="name">
    <span id="nameErr"></span><br><br>

    Country:
    <input type="text" id="country" name="country">
    <span id="countryErr"></span><br><br>

    Occupation:
    <input type="text" id="occupation" name="occupation">
    <span id="occupationErr"></span><br><br>

    Status:
    <input type="text" id="status" name="status">
    <span id="statusErr"></span><br><br>

    <input type="submit" name="submit" value="Submit">
</form>

这是 HTML 表单。

请帮忙，谢谢

【问题讨论】：

当您点击第一个返回语句时，整个函数将退出。如果您将所有表单元素留空，则只会显示第一个错误而不会显示其他错误，因为第一个 if 和第一个 else 中有 return 语句。

标签： javascript html forms validation

【解决方案1】：

似乎你没有意识到调用return 会结束你所在的函数。如果验证失败，你会想要return false，但你不想return true 直到结束验证过程。

试试：

function myValidate() {
    var x = document.forms["myform"]["name"].value;
    var y = document.forms["myform"]["country"].value;
    var z = document.forms["myform"]["occupation"].value;
    var a = document.forms["myform"]["status"].value;
    var b = document.getElementById("nameErr");    
    var c = document.getElementById("countryErr");
    var d = document.getElementById("occupationErr");
    var e = document.getElementById("statusErr");

    if (!x || x.length==0) {
        b.innerHTML = "Name Must Be Filled Out";
        return false;
    } else {
        b.innerHTML = "";
    }

    if (!y || y.length==0) {
        c.innerHTML = "Country Must Be Filled Out";
        return false;
    } else {
        c.innerHTML = "";
    }

    if (!z || z.length==0) {
        d.innerHTML = "Occupation Must Be Filled Out";
        return false;
    } else {
        d.innerHTML = "";
    }

    if (!a || a.length==0) {
        e.innerHTML = "Status Must Be Filled Out";
        return false;
    } else {
        e.innerHTML = "";
    }
    return true;
}

这将返回它遇到的第一个错误。如果您想一次检查它们，您需要将您的真/假存储在一个变量中，并推迟任何return 调用，直到结束并调用return theVariableName;

【讨论】：

我实际上更喜欢变量方法，因为你会一次得到所有错误，而且你不必一遍又一遍地提交表单，因为现在下一个项目会抱怨一些事情。
同意，这就是我在帖子末尾添加它作为选项的原因。 :)

【解决方案2】：

你可以使用一个标志来保存状态：

http://jsfiddle.net/vEvT2/1/

var flag = true;

如果找到空控件，则更改为 false

【讨论】：