Javascript - 表单在错误消息后仍然提交

Question

可能有点错别字之类的，但是我找了找了，没找到。我已经查看了很多关于完全相同的内容的帖子，但我仍然无法弄清楚。任何帮助将不胜感激。

<script language="Javascript">

function validateForm()
{
  var x = document.addNewForm.ecrNumber.value;
  if (x==null || x=="")
  {
    alert("ECR Number must be filled out");
    document.addNewform.ecrNumber.focus();
    return false;
  }

  var y=document.addNewForm.origin.value;
  if (y==null || y=="")
  {
    alert("Originator Name must be filled out");
    document.addNewform.origin.focus();
    return false;
  }
  var des=document.addNewform.descript.value;
  if (des=null || des=="")
  {
    alert("Description must be filled out");
    document.addNewform.descript.focus();
    return false;
  }
  return true;
}



</script>

和 html

 <form name="addNewForm" action="index.php/ecr-form-to-database" onSubmit="return validateForm();" method="post">
 <table width="60%">
    <tr><td>ECR No.: </td><td><input type="textbox" id="ecrNumber" name="ecrNumber" /> </td> </tr>
    <tr><td>Originator Name: </td><td><input type="textbox" id="origin" name="origin" value="<?php print $empName;?>" / ></td></tr>
    <tr><td>Description:</td><td><textarea id="descript" name="descript"></textarea></td></tr>
    <tr><td> </td><td> </td></tr>
    <tr><td colspan="2" style="text-align:center"><input type="submit" value="Submit Form" /></td></tr>
    </table>
    </form>

Answer 1

并非所有浏览器都直接在文档中存储表单和 ID，但由于您的所有元素都有 ID，您为什么不使用它:

function validateForm() {
    var x   = document.getElementById('ecrNumber');
    var y   = document.getElementById('origin');
    var des = document.getElementById('descript');

    if ( ! x.value ) {
        alert("ECR Number must be filled out");
        x.focus();
        return false;
    }

    if ( ! y.value ) {
        alert("Originator Name must be filled out");
        y.focus();
        return false;
    }

    if ( ! des.value ) {
        alert("Description must be filled out");
        des.focus();
        return false;
    }

    return true;
}

FIDDLE