Javascript 使用JS在提交时验证HTML表单

我一直在读关于如何做到这一点的书，我的验证基本上是有效的。这只是实际提交我有问题

目前，文本字段已被正确选中，消息按其应有的方式显示。但是，当我单击submit时，表单仍然会提交，并且我无法在第一条消息之后显示任何测试警报消息

我尝试过在表单标记中从onsubmit调用validation（），并在提交按钮上单击onclick。我不知道我在这里做错了什么

您可以忽略表单中的php变量。这些是我们正在删除的旧php验证

以下是表格：

<form id="registrationForm" action="upload_file.php?upload='docu'" method="post" enctype="multipart/form-data" >
        <table >
            <tr>
                <td>Email: </td>
                <td><input type="text" id="email" name="userInput" value="<?php echo  $email; ?>" onBlur="validateEmail(this.value)" onKeyUp="validateEmail(this.value)" maxlength="80" size="25"><span id="emailError" class="error">  <?php echo  $emailErr;?></span></td>

            </tr>
            <tr>
                <td>First Name: </td>
                <td><input type="text" name="userInput" id="fname" value="<?php echo  $firstName; ?>" onKeyUp="validateName(this.value,1)"  onBlur="validateName(this.value,1)"><span id="fnameError" class="error">  <?php echo  $firstNameErr;?></span></td>
            </tr>
            <tr>
                <td>Last Name: </td>
                <td><input type="text" name="userInput" id="lname" value="<?php echo  $lastName; ?>" onKeyUp="validateName(this.value,2)"  onBlur="validateName(this.value,2)"><span id="lnameError"  class="error">  <?php echo  $lastNameErr;?></span></td>
            </tr>
            <tr>
                <td>Phone: </td>
                <td><input type="text" name="userInput" id="phone" value="<?php echo  $phone; ?>" maxlength="15" size="10" onBlur="validatePhone(this.value)" onKeyUp="validatePhone(this.value)"><span id="phoneError" class="error">  <?php echo  $phoneErr;?></span></td>
            </tr>
            <tr>
                <td>Password: </td>
                <td><input id="password" type="password" id="password" name="userInput" maxlength="20" onBlur="validatePassword(this.value)" onKeyUp="validatePassword(this.value)"><span id="passwordError" class="error">  <?php echo  $passwordErr;?></span></td>
            </tr>
            <tr>
                <td>Confirm Password: </td>
                <td><input id="confirm" type="password" id="confirm" name="userInput" maxlength="20" onBlur="validateConfirm(this.value)" onKeyUp="validateConfirm(this.value)"> <span id="confirmError" class="error">  <?php echo  $passwordErr;?></span></td>
            </tr>

        </table>

        <br/>
        <hr/>
        <h2>Manuscript's Information</h2>

        <label for="synopsisFile">Synopsis:</label>
            <input type="file" name="synopsisFile" id="synopsisFile"><span class="error"><?php echo  $synopsisErr;?></span><br><br/>

        <label for="synopsisFile">Chapters:</label>
            <input type="file" name="chaptersFile" id="synopsisFile"><span class="error"><?php echo  $chaptersErr;?></span><br>

        <br/> <br/>

        <input id = "submit" type="submit" name="register_submit" value="Submit" onclick ="return validation();">  
    </form>

电邮：
您的JavaScript验证函数包含错误：

getElementById('fname',1)

getElementById（id）
方法只接受1个参数

然而，正如@yvanavermaet所指出的，您在通话前还应该有“文档”：

document.getElementById(id);

它是

而不是

getElementById('email')

除了验证函数外，您在所有函数中的操作都是正确的。
您的表单还有其他问题。将任何表单控件命名为“submit”都会屏蔽表单的submit方法，因此您无法调用它，因此不要将其用作名称或ID。通常不需要为sumbit按钮指定名称或ID，所以请记住它

此外，表单验证应该在表单的提交处理程序上，而不是在提交按钮上，因为表单可以在不按提交按钮的情况下提交。使用以下命令移动侦听器并传递对表单的引用：

最后，你有：

testPassword == null 

testPassword被赋予表单控件的值，表单控件的值总是字符串。字符串永远不能等于null（即使是空字符串），因此上面的测试总是返回false
 哦，老兄，我今天做这件事太久了。有时候，只需要一双（不那么疲倦的）眼睛。非常感谢，没问题。接受scunliffe或我自己的答案，让人们知道这个问题已经结束。祝你好运：）谢谢。那（，1）是用于名称验证的，我放错地方了。太累了，哈哈，没用。现在我的Javascript都不工作了，firebug报告页面上根本没有Javascript。然后在修改代码时创建了一个脚本错误。提交事件被每个表单验证脚本使用，原因正如我所说的，引用表单控件作为表单的命名属性一样，它比使用getElementById更有效。
getElementById('email')

<form ... onsubmit="return validation(this)" ...>

function validate(form) {

  if (!validateEmail(form.email.value)) {
    // failed

testPassword == null