Question

我一直在阅读有关如何执行此操作的信息，而且我的验证工作正常。这只是我遇到问题的实际提交。

目前，正确检查了文本字段，并按照应有的方式显示消息。但是，当我单击“提交”时，表单仍然会提交，并且我无法在第一个之后显示任何测试警报消息。

我尝试在表单标签中调用onsubmit中的validation（），并点击提交按钮。我无法弄清楚我在这里做错了什么。

您可以忽略表单中的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>

这是我正在使用的验证

<script type="text/javascript">
function validateEmail(email)
{
var valid = false;
var testEmail=email;
var atpos=testEmail.indexOf("@");
var dotpos=testEmail.lastIndexOf(".");

if (atpos<1 || dotpos<atpos+2 || dotpos+2>=testEmail.length)
{
    document.getElementById('emailError').innerHTML = "Invalid Email";
    document.getElementById('emailError').style.color = 'red';
    valid = false;
}
else
{
    document.getElementById('emailError').innerHTML = "Valid Email";
    document.getElementById('emailError').style.color = 'green';
    valid = true;
}
return valid;
}

function validateName(name, nameType)
{
var valid = false;
var testName = name;
var testNameType = nameType;

if (testNameType == 1)
{
    if (testName == null || testName.length<=0)
    {
        document.getElementById('fnameError').innerHTML = "Invalid Name. Name must not be blank.";
        document.getElementById('fnameError').style.color = 'red';
        valid = false;
    }
    else
    {
        document.getElementById('fnameError').innerHTML = "Valid Name";
        document.getElementById('fnameError').style.color = 'green';
        valid = true;
    }

}
else if(testNameType == 2)
{
    if (testName == null || testName.length<=0)
    {
        document.getElementById('lnameError').innerHTML = "Invalid Name. Name must not be blank.";
        document.getElementById('lnameError').style.color = 'red';
        valid = false;
    }
    else
    {
        document.getElementById('lnameError').innerHTML = "Valid Name";
        document.getElementById('lnameError').style.color = 'green';
        valid = true;
    }
}

return valid;
}

function validatePhone(phone)
{
var valid = false;
var testPhone = phone;
var phoneFormat = /^\(?([0-9]{3})\)?[- ]?([0-9]{3})[- ]?([0-9]{4})$/;  

if (testPhone == null || testPhone.length<=0)
{
        document.getElementById('phoneError').innerHTML = "Invalid Phone Number. Must not be blank.";
        document.getElementById('phoneError').style.color = 'red';
        valid = false;      
}
else
{
    if (!(testPhone.match(phoneFormat)))
    {
        document.getElementById('phoneError').innerHTML = "Invalid Phone Number.";
        document.getElementById('phoneError').style.color = 'red';
        valid = false;
    }
    else
    {
        document.getElementById('phoneError').innerHTML = "Valid Phone Number";
        document.getElementById('phoneError').style.color = 'green';
        valid = true;
    }
}
return valid;
}
function validatePassword(password)
{
var valid = false;
var testPassword = password;
var MIN_CHARS = 5;

if (testPassword == null || testPassword.length<MIN_CHARS)
{
    document.getElementById('passwordError').innerHTML = "Invalid Password. Password must be at least 5 characters.";
    document.getElementById('passwordError').style.color = 'red';
    valid = false;
}
else
{
    document.getElementById('passwordError').innerHTML = "Valid Password";
    document.getElementById('passwordError').style.color = 'green';
    valid = true;
}

if (testpassword !== document.getElementById('confirm').value)    //when the password is changed, recheck the confirm password.
{
    alert(document.getElementById('confirm').value);
    document.getElementById('confirmError').innerHTML = "Passwords do not match";
    document.getElementById('confirmError').style.color = 'red';
    valid = false;

}
else
{
    alert(document.getElementById('confirm').value);
    document.getElementById('confirmError').innerHTML = "Passwords match";
    document.getElementById('confirmError').style.color = 'green';
    valid = true;
}
return valid;
}

function validateConfirm(confirmPassword)
{
var valid = false;
var testConfirm = confirmPassword;

if (testConfirm !== document.getElementById('password').value)    
{
    document.getElementById('confirmError').innerHTML = "Passwords do not Match";
    document.getElementById('confirmError').style.color = 'red';
    valid = false;

}  
else
{
    document.getElementById('confirmError').innerHTML = "Passwords match";
    document.getElementById('confirmError').style.color = 'green';
    valid = true;
}    
return valid;
}

function validation()
{    
var validData = false;

alert(validData);
alert(validateEmail(getElementById('email').value));

if (validateEmail(getElementById('email').value) == false)
{
    validData = false;
    alert("email " + validData);
}
else if(validateName(getElementById('fname',1).value) == false)
{
    validData = false;
    alert("fname " + validData);
}
else if(validatename(getElementById('lname',2).value) == false)
{
    validData = false;
    alert("lname " + validData);
}
else if(validatePhone(getElementById('phone').value) == false)
{    
    validData = false;
    alert("phone " + validData);
}
else if(validatePassword(getElementById('password').value) == false)
{
    validData = false;
    alert("password " + validData);
}
else if(validateConfirm(getElementById('confirm').value) ==false)
{
    validData = false;
    alert("confirm pass " + validData);
}
else
{
    validData = true;
}

alert(validData);
//alert(document.getElementById("validData").value);
return false;
//return validData;


}
</script>

Answer 1

您的JavaScript验证功能包含错误：

getElementById('fname',1)

getElementById(id)方法只需要1个参数。

然而，正如@yvanavermaet所说，在通话之前你也应该有“文件”：

document.getElementById(id);

Answer 2

它的

document.getElementById('email')

而不是

getElementById('email')

除了验证功能之外，您在所有功能中都是正确的。

Answer 3

您的表单还有其他问题。命名任何表单控件＆＃34;提交＆＃34;屏蔽表单的提交方法，因此您无法对其进行调用，因此请勿将其用作名称或ID。通常没有必要给一个sumbit按钮一个名字或id，所以只需要它就可以了。

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

传递对表单的引用

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

然后在该函数中，您可以按名称访问表单控件，并省去 getElementById （和ID属性）。此外，如果各个验证例程返回true或false，则可以将测试简化为：

function validate(form) {

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

最后，你有：

testPassword == null

testPassword 被赋予表单控件的值，表单控件值始终是字符串。字符串永远不能等于null（即使是空字符串），因此上面的测试总是返回false。

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

3 个答案: