Question

我有一个我无法解释的奇怪问题。我正在使用播放框架，当我尝试运行下面的视图时它只适用于我重复下面的表单操作...它有效，但我知道它不对。如果有人可以帮助解释或纠正，那就表示赞赏。

@(errorMessage: String = "")(implicit messages: Messages)

@helper.form(routes.ApplicationHomeController.login) {
    @main(title = messages("single.title")) {
        <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet" type="text/css">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <div id="userbox">
            <form action="@{routes.ApplicationController.doLogin()}" method="post"></form>

            <form action="@{routes.ApplicationController.doLogin()}" method="post">
                <div style="color: red">@errorMessage</div>
                <h1 id="logintxt" style="background-color: rgb(11, 146, 9);
                            background-position: initial;
                            background-repeat: initial;">Driver Service <b>ß</b>eta</h1>

                <div id="submit_giff" style="display: none;">
                    <hi> Authenticating: <img src="/assets/images/loader-bar.gif" align="absmiddle">  </hi>
                </div>
                <input id="name" name="userName" placeholder="Username" style="opacity: 1;
                            background-color: rgb(255, 255, 255);
                            background-position: initial;
                            background-repeat: initial;">
                <input id="pass" name="password" type="password" placeholder="Password" style="opacity: 1;
                            background-color: rgb(255, 255, 255);
                            background-position: initial;
                            background-repeat: initial;">

                <p id="namealert" style="display: none;
                            opacity: 1;">Username:</p>
                <p id="passal" style="display: none;
                            opacity: 1;">Password:</p>
                <input id="loginbtn" style="opacity: 0.2;
                            cursor: default;" type="submit" value="Login">
            </form>
        </div>
        <script src="/assets/javascripts/login.js"></script>
    }
}

Answer 1

立即观察两次。

一：@helper.form(...)会将一个<form>元素写入最终生成的HTML中。然后，您的视图会在第一个表单中包含其他文字<form>嵌套。 Nested forms are invalid HTML。您有一个表单提交到routes.ApplicationController.doLogin，另一个表单提交到routes.ApplicationController.login。谁知道浏览器实际提交哪些内容？我们无法真正预测，因为嵌套表单无效。

二：您的@main(...)视图嵌套 @helper.form(...)。我假设您的主视图包含<html>...</html>。这将导致HTML以<form>元素开头，内部，即<html>元素。这也是非常无效的标记。

我的猜测是这些问题中的一个或两个都是你的问题。

尝试使用生成的HTML并通过像https://validator.nu/这样的HTML验证程序运行它。修复验证程序发现的任何问题，不要嵌套表单，并确定登录表单应该实际提交给哪条（单个）路由。

Scala Play表单

1 个答案: