我希望用户在未输入所需信息时无法前进到下一个屏幕

I want the user to not be able to advance to the next screen if he/she doesn't enter the required information

本文关键字：屏幕 下一个 信息 用户 未输 输入 我希望      更新时间：2023-09-26

该函数接收用户的用户名和密码。如果其中一个留空，则没有任何反应，并且如果他们单击"开始"按钮，它们将不会链接到 google.ca。如果他们在所需部分提交，那么他们将被引导到 google.ca。出于某种原因，如果任何文本框未填充并按下 Go 按钮，当我希望它只停留在该页面上直到用户填充文本框时，它会将我带到 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");
}

您不会停止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。只需调用函数即可。

我不

明白你的代码逻辑，但也许我可以为你提供一种自己修复代码的方法。

您有一个窗体和一个按钮。如果单击该按钮，则执行 go（） 函数。因为按钮是一个提交按钮，所以在同一单击时，您可以再次执行 go（） 函数。

我的建议是创建一个新函数，你可以将其命名为validate（）：

function validate() {
    var username = document.get........ 
    var password = document.get........ 
    // more logic here, if need
    if(!username || !password) {
        return false;
    } 
    return true
}

现在，您的提交按钮如下所示：

<input type="submit" value="Go" id="goButton" onclick="return validate()"/>

如果 validate（） 函数返回 false，则表单不会提交。

希望这有帮助。

相关文章：