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函数在其他情况下不起作用，例如：我的表单显示“color”和“animal”，或者只显示“animal”等。

Answer 1

由于您的字段是动态生成的，因此您无法访问<input type="text" name="city" />等元素，如果它不存在，那么一般情况下您需要遍历form中的所有文本框。请参阅下面的代码

    function validateForm() {
        alert("here");
        $('#Form input[type="text"]').each(function(){
        //your code here
        var data=""+$(this).val();
        if(data=="")
        {
            var name=$(this).attr("name");
            alert("Please Enter "+name);
        }

        });
    }

Answer 2

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

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
}

Answer 3

在javascript中分配值之前，您必须检查输入的元素，因为它是动态打印的。例如

document.forms["Form"]["city"].value

在javascript中，您必须使用以下代码来检查其定义的

if(document.forms["Form"]["test"] !== undefined)
 alert(document.forms["Form"]["city"].value)

或者使用由Atul

添加的jQuery代码

Answer 4

您使用模板生成HTML，因此如果页面未显示“city”表示“city”标记不存在，并且您的JS代码将在“var x”行中崩溃，因为document.forms [“Form “] [”city“]未定义。

我建议您像这样修改JS代码：

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

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

如果您不输出该字段，则该字段将是未定义的。

每当字段更改时，javascript验证表单

4 个答案: