Javascript 表单验证未加载 PHP 页面

Question

我在 PHP 页面中有以下表单<form action="login.php" method="post">    School: <input type="text" name="schoolInput"><div id="erschool"></div><br>    Username: <input type="text" name="usernameInput"><div id="eruser"></div><br>    Password: <input type="text" name="passwordInput"><div id="erpass"></div>    <input type="button" name="loginSubmit" value="submit" onclick="return validateLogin()"></form>我的验证看起来像这样function validateLogin() {    var school = document.getElementsByName("schoolInput")[0].value    var username = document.getElementsByName("usernameInput")[0].value    var password = document.getElementsByName("passwordInput")[0].value    var failed = false;    if(!school){        document.getElementById("erschool").innerHTML = "No school entered";        failed = true;    }    if(!username){        document.getElementById("eruser").innerHTML = "No username entered";        failed = true;    }    if(!password){        document.getElementById("erpass").innerHTML = "No password entered";        failed = true;    }    if(failed){        return failed;    }    return true;}验证中的 JS 在激活错误消息时起作用。但是，如果表单正确填写，它不会按应有的方式加载login.php。我正在 Heroku 上运行该应用程序进行测试。我究竟做错了什么？

Answer 1

您需要使用<button type=submit">来提交表格。此外，您还可以将验证移至表单中。IE：

<form action="login.php" method="post"  onclick="return validateLogin()">

    School: <input type="text" name="schoolInput"><div id="erschool"></div><br>

    Username: <input type="text" name="usernameInput"><div id="eruser"></div><br>

    Password: <input type="text" name="passwordInput"><div id="erpass"></div>

    <button type="submit" name="loginSubmit" value="submit">

</form>

另外，您的验证函数是错误的 - 它总是返回 true（因此表单将始终被提交）：

if(failed){

    return failed;   // if failed is true, then return TRUE...

}

return true;         // ....otherwise return TRUE!!

我想你的意思是返回，!failed所以如果failed是 true 那么你返回 false 吗？

您实际上不需要检查failed两者的值 - 您只需返回!failed：

如果 failed 为 true，则将!failed返回 false，因此不会提交表单

如果 failed 为 false，则!failed返回 true，以便提交表单

Answer 2

如何让它发挥作用

您可能想要实现的是：

<button type="button" onclick="if(validateLogin()) this.form.submit()">

这样，只有当函数返回 TRUE 时，您的表单才会被提交。（正如 @FluffyKitten 指出的那样，情况总是如此，所以你也必须修复验证函数。）

验证表单的方法不止一种。我最喜欢的是为表单提供一个onsubmit处理程序，并且您在按钮上使用的语法看起来像是您试图将此技术与按钮单击验证方法混合在一起。表单 onsubmit 方式如下所示：

<form onsubmit="return validateLogin()">

    ...

    ...

    <button type="submit">

</form>

这是两种不同的方式。

方法一：form onsubmit=return valid()+button type=submit

方法2：form+button type=button onclick=if(valid()) submit()

改进验证登录

我建议在这里进行一些重构，以提高可读性和易用性。

function validateLogin() {

    var checkEmpty = function(name) {

        var element = document.getElementsByName(name+"Input")[0];

        if(element.value !== "") return false; // return if not empty

        var errorField = document.getElementById("er"+name);        

        errorField.innerHTML = "No value for "+name;

        return true;

    }

    

    if(checkEmpty("school"   )) return false;

    if(checkEmpty("username" )) return false;

    if(checkEmpty("password" )) return false;

    return true;

}