Question

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Login Page</title>
    </head>
    <br><br><br><br>
    <body style="background-color: cornflowerblue" >
        <form action="Login" method="post" name="frmLogin">
            <table style="background-color: darkgrey" align="center" border="1">
                <thead>
                    <tr>
                        <th colspan="2" style="font-size: xx-large;color:darkmagenta" >Login Details</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td style="font-weight: bold" >Username</td>
                        <td><input type="text" name="txtUsername" value="" /></td>
                    </tr>
                    <tr>
                        <td style="font-weight: bold">Password</td>
                        <td><input type="password" name="txtPassword" value="" /></td>
                    </tr>
                    <tr>
                        <td align="center" colspan="2" >
                            <input type="button" onclick="return reset();" value="Reset" name="btnReset" />
                            <input type="submit" onclick="return submit();" value="Submit" name="btnSubmit" />
                        </td>
                    </tr>
                </tbody>
            </table>

        <script type="text/javascript"  language="javascript">
            function submit()
            {

                var username=frmlogin.document.txtUsername.vlaue;
                var password=frmlogin.document.txtPassword.vlaue;
                if(username=="")
                {
                    alert("Username Must be filled");
                    return false;
                }
                if(password=="")
                {
                    alert("Password Must be filled");
                    return false;
                }
                return true;
            }
            function reset()
            {
                frmlogin.document.txtUsername.vlaue="";
                frmlogin.document.txtPassword.vlaue="";
                return false;
            }
        </script>
        </form>
    </body>
</html>

我上面有html代码，并且在成功提交后我调用了一个servlet名称Login。

但它直接调用servlet。它会跳过java脚本函数。

如果我删除表单，则执行java脚本。

Answer 1

为表单添加 onsubmit 事件处理程序：

<form action="Login" method="post" name="frmLogin" onsubmit="return submit();">

Answer 2

您的问题是您为自定义表单验证程序功能提供了与表单默认提交函数form.submit() 相同的名称。表单的默认提交函数在此上下文中具有优先权。

要解决此问题，您需要将submit()重命名为其他内容。 E.g。

onclick="return validate();"

与

function validate() {
    // ...
}

对于具体问题

无关，您的JS函数中存在几个主要错误，例如以下行是完全错误的：

var username=frmlogin.document.txtUsername.vlaue;

但如果你无法弄明白，那就是另一个问题。

最后但同样重要的是，我希望您知道客户端可以禁用/欺骗JS吗？确保您还在服务器端验证表单。另请参阅our servlets wiki page以获取具体示例。

Answer 3

如果你想执行那个javascript代码，你需要为提交按钮单击捕获事件。我有同样的问题，但我使用jquery点击事件解决了它，因为默认情况下它直接提交而不移动代码。如果有任何替代解决方案，请告诉我们

btw jquery代码可以写成

$（“input [name = btnSubmit]”）。click（function（e）{

 ..if fails conditions..
 e.preventDefault();

}）;

没有调用Javascript函数

3 个答案: