javascript - 如果用户没有输入所需信息，我希望他/她无法前进到下一个屏幕

Question

该函数接收用户的用户名和密码。如果其中一个留空，则不会发生任何事情，并且如果他们单击“开始”按钮，它们将不会链接到 google.ca。如果他们在必填部分提交，那么他们将被定向到 google.ca。出于某种原因，如果有任何文本框未填写并按下“开始”按钮，当我希望它只停留在该页面上直到用户填写文本框时，它会将我带到 404 错误页面。是什么导致了这个问题？这是 HTML 文件。

<form action="index.php" method="get" id="form" onsubmit="return go(document.getElementById('username'), document.getElementById('password'))">
    <table>
        <tr><td>Username: <input type="text" name="username" maxlength="16" id="username" onKeyUp="updateLength('username', 'usernameLength')" onblur="checkTextField(this);"/> <span id="usernameLength"></span></td></tr>     
        <tr><td>Password: <input type="password" name="password" maxlength="50" id="password" onKeyUp="updateLength('password', 'passwordLength')"> <span id="passwordLength" onblur="checkTextField(this);"></span></td></tr>
        <tr><td><input type="submit" value="Go" id="goButton" onclick="go(username, password)"/></td></tr>
    </table>
</form>

这是js文件

function loginFunction() {
    var url = "login.html";
    window.open(url);
}

function createAccountFunction() {
    var url2 = "createAccount.html";
    window.open(url2);
}

function go(username, password) {
    if (username != null && password != null) {
        var url = "https://www.google.ca/";
        window.open(url);
    }
}

function updateLength(field, output) {
    var curr_length = document.getElementById(field).value.length;
    var field_mLen = document.getElementById(field).maxLength;
    document.getElementById(output).innerHTML = curr_length + '/' +     field_mLen;
}

function checkTextField(field) {
    if (field.value == '')
        alert("Field is empty");
}

Answer 1

您没有停止 onsubmit 的默认事件。您可以通过将 go 函数更改为:

function go(username, password) {
    return function(event) {
        event.preventDefault();

        if (username != null && password != null) {
            var url = "https://www.google.ca/";
            window.open(url);
        }
    }
}

您也不需要 HTML 中的 return。只需调用函数即可。