仅验证一种表格答案

【问题标题】：Validation of only one form仅验证一种表格
【发布时间】：2014-07-02 01:01:48
【问题描述】：

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

<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

但它不起作用。为什么？

【问题讨论】：

定义“不起作用”？您还应该在例如jsbin.com。并添加一个文档类型。
您能详细说明什么“不起作用”吗？
我提交了第一个表单并且未选中该复选框，它给了我一个应有的警报。但是如果第二种形式的复选框被选中，它不会发出警报。因此，出于某种原因，脚本会读取所有复选框。不仅仅是提交表单中的那些。
"But if the checkbox in the second form is checked, it will not give an alert." 为什么要呢？这些函数会查看复选框是否未选中，然后才会引发警报。也许您应该逐步描述您对代码的期望。
我的意思是，如果第二个表单中的复选框被选中并且第一个表单被提交，它不会发出警报。我想要的是脚本只检查正在提交的表单内的复选框。

标签： javascript validation checkbox

【解决方案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 验证脚本风格重写了它；其他样式也是可能的。

【讨论】：

它按我想要的方式工作。非常好。为了安全起见，我可能会切换到收音机。我在同一页面上的一组收音机上尝试了此代码，并以与复选框相同的形式。他们每组有三台收音机。可悲的是，在他们身上尝试了脚本，但它无法处理它们。但这些 chekcboxes 是最重要的已验证。
你会有一个新问题，否则读者不能再关注这个话题了。但我也建议在您提出新问题之前进行一些互联网搜索。同时，请接受这个答案（点击旁边的 V/勾号），因为它适用于当前问题。