It is very strange.

The form below loops with a form fill policy.

If I chose not to submit it, it correctly fills out username and password, and I can just click the login button.

What on earth can be wrong?

Code:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>Organisation - Login</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <link rel="stylesheet" type="text/css" href="./plugins/bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="./plugins/font-awesome-4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" type="text/css" href="./css/login.css">
        <script src="./plugins/jquery/jquery-1.12.4.min.js" type="text/javascript"></script>
        <script src="./plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
        <script src="./js/login.js" type="text/javascript"></script>
    </head>
    <body>
        <div class="container">

            <form class="form-login" name="form-login">
                <h3 class="form-login-heading">Login</h3>
                <label for="username" class="sr-only">Brugernavn</label>
                <input type="text" id="username" name="username" class="form-control" placeholder="Brugernavn" required="" autofocus="">
                <label for="password" class="sr-only">Password</label>
                <input type="password" id="password" name="password" class="form-control" placeholder="Password" required="">
                <button type="submit" id="login-btn" class="btn btn-lg btn-primary btn-block" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> Logger ind...">Login</button>
                <div id="error">Login mislykkedes. Kontroller venligst brugernavn og kodeord.</div>
            </form>
        </div>
    </body>
</html>