html表单验证的正确实现

Question

我编写了一段简单的 javascript 来验证复选框组。 javascript 工作正常，但在 html 中正确实现它被证明是困难的。我的尝试要么导致表单被发送，尽管验证失败，或者没有提交按钮，但其他一切正常。有人能帮忙吗？谢谢

  <form id="form1" name="form1" method="get" action="pre_process.php">
        <input name="q" type="text" value="<?php echo $_GET['q']; ?>" size="67"/>



<input type="submit" id="search_button" onclick= "chkChecks()" />
/////this line of code submits the form even when the javascript returns false

<input class="submit" type="button" onclick="chkChecks()" />
///this code works, doesn't send the form, but also takes away my nice shiny submit button

  ///////js code/////
    function chkChecks(){
isChecked=false

for(var i=0;i<document.forms["form1"]["SearchEngines[]"].length;i++){
if(document.forms["form1"]["SearchEngines[]"][i].checked){
isChecked=true
}
}

if(isChecked){
document.forms["form1"].submit()
}
else{
alert('Please select at least one Search Engine')
return false;
}

}
</script>

////也是被验证的表单部分

<table width="200">
              <tr>
                <td><label>
                  <input type="checkbox" name="SearchEngines[]" value="Bing" id="SearchEngines_0" checked="checked" />
                  Bing</label></td>
              </tr>
              <tr>
                <td><label>
                  <input type="checkbox" name="SearchEngines[]" value="Blekko" id="SearchEngines_1" checked="checked"  />
                  Blekko</label></td>
              </tr>
              <tr>
                <td><label>
                  <input type="checkbox" name="SearchEngines[]" value="Entireweb" id="SearchEngines_2" checked="checked" />
                Entireweb</label></td>
              </tr>

Answer 1

<input class="submit" type="button" onclick="chkChecks()" />

您的函数 chkChecks 可能返回 false，但从属性创建的实际处理程序更像这样：

function(event) {
    chkChecks();
}

最好使用 JavaScript 附加事件处理程序，以便识别返回值：

document.getElementById("submitbutton").onclick = chkChecks;

Answer 2

您可以在此处查看我提交的答案：

Is there a way to prevent a form from being submitted if it is not auto completed?

这就是我完成表单验证的方式，还有其他工具也可以让您进行表单验证，但我想为什么不自己做呢，它更快更容易管理。

您可以自己在 html 上硬编码验证类，也可以在 $(document).ready 上使用 jquery 选择器

Answer 3

按钮不会提交表单 - 默认情况下它们不做任何事情。它们通常与 JavaScript 结合使用，作为 AJAX 应用程序的一部分。

按钮将在用户单击它们时提交它们所在的表单，除非您使用 JavaScript 另行指定。

检查 isChecked 变量是真还是假，如果它是假的，那么做一些检查并使该变量为真。

if(isChecked !== true) { 
    for(var i=0;i<document.forms["form1"] ["SearchEngines[]"].length;i++){  
       if(document.forms["form1"]["SearchEngines[]"][i].checked){
          isChecked=true 
       }
    } 
 }