每次字段更改时javascript验证表单

Question

我有一个表单，其中的字段每次都在变化，但是 javascript 函数不起作用。

我的 javascript 代码有什么问题？

---

我的表格是用下面的代码制作的:

<form name="Form" action="" method="post" onsubmit="return validateForm()">

    <? if (/*statement*/){ ?>
        <label>city </label><input type="text" name="city" />
    <?}?>

    <? if (/*statement*/){ ?>
        <label>color </label><input type="text" name="color" />
    <?}?>

    <? if (/*statement*/){ ?>
        <label>animal </label><input type="text" name="animal" />
    <?}?>

    <button type="submit" name="submit" value="submit">submit</button>

</form>

---

我的 javascript.js 如下所示

function validateForm() {

    var x = document.forms["Form"]["city"].value;
    var y = document.forms["Form"]["color"].value;
    var z = document.forms["Form"]["animal"].value;

    if (x == null || x == "") {
        alert("need city");
        return false;
    }
    if (y == null || y == "") {
        alert("need color");
        return false;
    }
    if (z == null || z == "") {
        alert("need animal");
        return false;
    }
}

---

• 仅当我的表单显示“城市”、“颜色”和“动物”字段时，javascript 函数才有效。
• javascript 函数在其他情况下不起作用，例如:我的表单显示“颜色”和“动物”，或者只显示“动物”等。

Answer 1

一个简单的解决方法是在尝试访问其值之前检查该元素是否存在。尝试以下操作:

function validateForm() {
    var x = document.forms["Form"]["city"];
    var y = document.forms["Form"]["color"];
    var z = document.forms["Form"]["animal"];

    if (x != null && x.value == "") {
        alert("need city");
        return false;
    }
    if (y != null && y.value == "") {
        alert("need color");
        return false;
    }
    if (z != null && z.value == "") {
        alert("need animal");
        return false;
    }

    return true; // if everything is valid
}