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

按钮不会提交表单 - 默认情况下它们不会执行任何操作。它们通常与JavaScript一起用作AJAX应用程序的一部分。

当用户点击它们时，

按钮将提交它们所在的表单，除非您使用JavaScript另有说明。

检查isChecked变量是true还是false，如果是false则执行一些检查并使该变量为true。

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

Answer 2

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

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

function(event) {
    chkChecks();
}

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

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

Answer 3

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

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

这就是我进行表单验证的方式，还有其他工具也允许你进行表单验证，但我想为什么不自己做，它更快更容易管理。

你可以自己在html上对验证类进行硬编码，或者在$（document）上使用jquery选择器.ready

正确实现html表单验证

3 个答案: