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

Question

我是一名新的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表单。

请帮忙，谢谢

Answer 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;
}

这将返回遇到的第一个错误。 如果您想一次检查所有内容，则需要将true / false存储在变量中，并保留所有return叫，直到结束并return theVariableName;叫return theVariableName;

Answer 2

您可以将标志用于保存状态：

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

var flag = true;

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