Scala Play forms

I have a strange issue i cannot explain. i am using the play framework and when i try to run the View below it only works when i REPEAT the form action below... it works but i know it's not right. appreciative if anyone can help explain or correct.

@(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>
    }
}

Solution

Two immediate observations.

One: @helper.form(...) will write a <form> element into the HTML that ultimately gets generated. Your view then includes other literal <form>s nested inside the first form. Nested forms are invalid HTML. You have one form submitting to routes.ApplicationController.doLogin and the other submitting to routes.ApplicationController.login. Who knows which of these the browser will actually submit to? We can't really predict because nested forms are invalid.

Two: you have your @main(...) view nested inside your @helper.form(...). I assume your main view contains <html>...</html>. This is going to result in HTML that starts with a <form> element, inside which is the <html> element. This is horribly invalid markup too.

My guess is one or both of these issues are your problem.

Try taking your generated HTML and running it through an HTML validator like https://validator.nu/. Fix any issues the validator finds, don't nest forms, and decide which (single) route the login form should actually submit to.