Question

因此，我正在尝试重新学习网页设计，并将其作为我现在正在创建的应用程序的一部分。由于某种原因，当我单击表单上的提交按钮时，即使验证失败，它仍在提交。我可以看到JavaScript将错误消息打印到结果标签，但是一秒钟之后，它仍然会加载PHP页面。我不确定为什么会这样。是的，我知道在我的JS文件中所有内容都返回false，但这是为了证明我可能无法通过验证，并且无论如何都要提交验证，这毫无意义。感谢您的任何帮助，谢谢！

register.html

> temp_file && mv temp_file Input_file

validate_registration.js

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="/js/validate_registration.js"></script>
        <link href="css/style.css" type="text/css" rel="stylesheet" />
        <title>Family Polaris</title>
    </head>
    <body>
        <form name="registrationForm" action="register.php" onsubmit="validateForm()" method="post">
            <table>
                <tr>
                    <td colspan="3" class="title"><h1>Family Polaris</h1></td>
                </tr>
                <tr>
                    <td class="leftColumn">&nbsp;</td>
                    <td class="centerColumn"><h2>Registration</h2></td>
                    <td class="rightColumn">&nbsp;</td>
                </tr>
                <tr>
                    <td class="leftColumn">&nbsp;</td>
                    <td class="centerColumn">
                        <p>Thank you for taking the time to consider Family Polaris for your family needs!
                        <br>In order to get started all new users must register before they can login.
                        <br>Please fill out the registration form below, thank you!<br><br>
                        <span class="required">Fields marked with an asterisk (*) are required fields.</span><br><br></p>
                    </td>
                    <td class="rightColumn">&nbsp;</td>
                </tr>
                <tr>
                    <td class="leftColumn">First Name&nbsp;</td>
                    <td class="centerColumn">&nbsp;<input type="text" name="firstName" id="firstName" maxlength="50" required /><span class="required">&nbsp;*</span></td>
                    <td class="rightColumn">&nbsp;</td>
                </tr>
                <tr>
                    <td class="leftColumn">Last Name&nbsp;</td>
                    <td class="centerColumn">&nbsp;<input type="text" name="lastName" id="lastName" maxlength="50" required /><span class="required">&nbsp;*</span></td>
                    <td class="rightColumn">&nbsp;</td>
                </tr>
                <tr>
                    <td class="leftColumn">E-Mail&nbsp;</td>
                    <td class="centerColumn">&nbsp;<input type="text" name="email" id="email" maxlength="50" required /><span class="required">&nbsp;*</span></td>
                    <td class="rightColumn">&nbsp;</td>
                </tr>
                <tr>
                    <td class="leftColumn">Password&nbsp;</td>
                    <td class="centerColumn">&nbsp;<input type="password" name="password" id="password" maxlength="20" required /><span class="required">&nbsp;*</span></td>
                    <td class="rightColumn">&nbsp;</td>
                </tr>
                <tr>
                    <td class="leftColumn">Confirm Password&nbsp;</td>
                    <td class="centerColumn">&nbsp;<input type="password" name="confirmPassword" id="confirmPassword" maxlength="20" required /><span class="required">&nbsp;*</span></td>
                    <td class="rightColumn">&nbsp;</td>
                </tr>
                <tr>
                    <td class="leftColumn">4-digit Pin Code&nbsp;</td>
                    <td class="centerColumn">&nbsp;<input type="password" name="pin" id="pin" pattern="[0-9]{4}" required /><span class="required">&nbsp;*</span></td>
                    <td class="rightColumn">&nbsp;</td>
                </tr>
                <tr>
                    <td class="leftColumn">Confirm Pin Code&nbsp;</td>
                    <td class="centerColumn">&nbsp;<input type="password" name="confirmPin" id="confirmPin" pattern="[0-9]{4}" required /><span class="required">&nbsp;*</span></td>
                    <td class="rightColumn">&nbsp;</td>
                </tr>
                <tr>
                    <td class="leftColumn">&nbsp;</td>
                    <td class="centerColumn"><br>&nbsp;&nbsp;<input type="reset" onClick="printErr('')" />&nbsp;<input type="submit" name="Submit" /></td>
                    <td class="rightColumn">&nbsp;</td>
                </tr>
                <tr>
                    <td class="leftColumn">&nbsp;</td>
                    <td class="centerColumn"><br><span id="result"></span></td>
                    <td class="rightColumn">&nbsp;</td>
                </tr>
            </table>
        </form>
    </body>
</html>

register.php

function validateForm() {
    var firstName = document.getElementById("firstName").value;
    var lastName = document.getElementById("lastName").value;
    var email = document.getElementById("email").value;
    var pass = document.getElementById("password").value;
    var confirmPassword = document.getElementById("confirmPassword").value;
    var pin = document.getElementById("pin").value;
    var confirmPin = document.getElementById("confirmPin").value;

    if(pass.length < 8) {
        printErr("Error: Passwords must be between 8 and 20 characters in length.");
        return false;
    } else if(isNaN(pin)) {
        printErr("Error: Pin code must be numeric characters only.");
        return false;
    } else if(pass != confirmPassword) {
        printErr("Error: Passwords do not match.");
        return false;
    } else if(pin != confirmPin) {
        printErr("Error: Pin codes do not match.");
        return false;
    } else {
        printErr("");
        // DO AJAX STUFF
        return false;
    }

    return false;
}

function printErr(errMsg) {
    var div = document.getElementById('result');
    div.innerHTML = errMsg.toString();
}

Answer 1

尝试更改这样的onsubmit方法

onsubmit="return validateForm()"

表单验证失败仍然提交

1 个答案: