JavaScript表单验证不会停止提交

时间:2016-10-19 10:33:35

标签: javascript html forms validation

我有一个包含一些复选框的表单:

<form class="lightblue" action="someValidRef" method="post" onsubmit="return client_validation(this)">
...
<div>
      <label>Label</label>
      <ul>
        <li><input type="checkbox" name="land" value="Austria">Austria</li>
        <li><input type="checkbox" name="land" value="Belgium">Belgium</li>
        <li><input type="checkbox" name="land" value="Bulgaria">Bulgaria</li>
        <li><input type="checkbox" name="land" value="Czech Republic">Czech Republic</li>
        <li><input type="checkbox" name="land" value="Switzerland">Switzerland</li>
        <li><input type="checkbox" name="land" value="Germany">Germany</li>
        <li><input type="checkbox" name="land" value="Denmark">Denmark</li>
        <li><input type="checkbox" name="land" value="Spain">Spain</li>
        <li><input type="checkbox" name="land" value="Estland">Estland</li>
    </ul>
</div>
...
<div>
        <input type="submit" name="submit" value="send" />
        <input type="reset" name="reset" value="reset" />
</div>

以下JS:

<script language="JavaScript1.2">
function client_validation(theForm)
{
    ...
    var land = theForm.land;
    var land_set = false;
    for (i = 0; i < land.length; i++) {
      if (land[i].checked) {
        land_set = true;
      }
    }
    if(!land_set){
        alert("please choose a country");
        theForm.land.focus();
        return (false);
    }   
    ...
  return true;
}
</script>

我省略了此帖子的其他表单字段和其他验证部分。验证的每个其他部分都在工作,但是这个复选框列表会抵消每个验证。选择国家/地区时,它可以正常运行,也可以执行其他验证。但是,如果我在没有选择国家/地区时点击提交,我的表单仍会提交。它甚至给我提醒“请选择一个国家”,但在结束此消息时,表单已提交......为什么还在提交?我尝试在验证结束时将“return true”语句更改为return land_set,但它也不起作用。

1 个答案:

答案 0 :(得分:2)

 theForm.land.focus();

您函数中的上述代码行引发错误,控件永远不会到达行return (false);。这就是为什么它不会阻止页面提交。

您可以通过执行以下操作来修复错误:

theForm.land[0].focus();

由于land是一个数组,这就是错误发生的原因。