I'm using MVC to build a login page. I have a Javascript function that gets called when the submit button is clicked. However I noticed in the debugger that the function doesnt get executed fully. Here is my code:

@{
    string loginError = (string)ViewData["loginError"];
}


<script type="text/javascript">
    function checkLogin() {
        if (@loginError != null)
        {
            var message = '@loginError';
            if (message)
            alert(message);
        }
    }
</script>


<form class="login-form" action="/Login/Login" method="POST">

    <div class="login-form__content">

        <div class="login-form__header">Login to your account</div>

        <input class="login-form__input" type="text" name="username" placeholder="Username">

        <input class="login-form__input" type="password" name="password" placeholder="Password">

        <button class="login-form__button" type="submit" onsubmit="checkLogin();">Login</button>

        <p></p>

        <button class="login-form__button" type="submit" formaction="/Register/Create" id="signupbutton">Sign up</button>

    </div>

</form>

So, assuming that a user enters the wrong credentials, the loginError variable will be assign a value "Invalid username or password". Oddly after the line: var message = '@loginError', the function just stops there.

Is there something wrong with my code?