Question

在包含两个表单的页面上，我需要一个只验证正在提交的脚本的脚本。我做了一个简单的页面来显示问题

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script>
function validateForm() {
var checks = document.getElementsByName("tjek");
var checksChecked = false;

var i = 0;
while (!checksChecked && i < checks.length) {
    if (checks[i].checked) checksChecked = true;
    i++;
}


if (!checksChecked) {
    alert("Select something!")
    return false;
}
}

</script>
</head>

<body>
<form onSubmit='return validateForm()' action="" method="get">
<input name="tjek" type="checkbox" value="" />
<input name="" type="submit" />
</form>
<form onSubmit='return validateForm()' action="" method="get">
<input name="tjek" type="checkbox" value="" />
<input name="" type="submit" />
</form>
</body>
</html>

http://jsbin.com/duqotobi/1/edit

但它不起作用。为什么呢？

Answer 1

这里是：现场演示：http://jsbin.com/duqotobi/2/edit?html,output。

代码：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Demo</title>
<script>
function validateForm(caller) {
    var checks = caller.querySelectorAll('input[type="checkbox"]');
    for (var i=0; i<checks.length; i++) {
        if (checks[i].checked == false) {
            alert("Select something.");
            return false;
        }
        else {
            caller.submit();
        }
    }
}
</script>
</head>
<body>
    <form name="firstForm" action="form_handler.php" method="get">
        <input name="tjek" type="checkbox" value="" />
        <input type="button" value="Send" onclick="validateForm(this.parentNode)" />
    </form>

    <form name="secondForm" action="form_handler.php" method="get">
        <input name="tjek" type="checkbox" value="" />
        <input type="button" value="Send" onclick="validateForm(this.parentNode)"  />
    </form>
</body>
</html>

如果不是完全不言自明，请告诉我。然而，要意识到，给复选框赋予相同的名称是很棘手的，即使它涉及不同的形式。只有属于同一组的无线电输入才应具有相同的名称。这个脚本在这方面并不重要，但你知道。

我用我的JS验证脚本来改写它;其他风格也是可能的。

仅验证一种形式

1 个答案: