Untitled

<!DOCTYPE html>
<html>
    <head>
        <title>Aufgabe 2</title>
        <meta charset="utf-8">
        <link type="text/css" rel="stylesheet" href="index.css">

        <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
    </head>
    <body>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.2/js/toastr.min.js" type="text/javascript"></script>

        <div style="display: flex; justify-content: center;">
            <img src="header.jpg" alt="Header Image" align="middle" id="header">
        </div><br>

        <div align="center" id="content">
            Username: <input type="text" id="username" name="username" placeholder="Username" required><br><br>
            Password: <input type="password" id="password" name="password" placeholder="Password" required><br><br>
            <button style="width: 100px; height: 50px;" type="submit" name='login' onclick="login()">Login</button>
        </div>

    </body>
</html>

<script>

    function login()
    {
        var username = $('#username').val();
        var password = $('#password').val();

        $('#username').val("");
        $('#password').val("");

        if(username.match("^[a-zA-Z]+$") && password.match("^[a-zA-Z0-9 ]+$"))
        {
            $.post("handler.php",
                {
                    username: username,
                    password: password
                },
                function(data, status){
                    if(data == "true")
                    {
                        location = "employees_list.html";
                    }
                    else
                    {
                        toastr.warning("username or password wrong");
                    }
                });
        }
        else
        {
            toastr.warning("Check your username and password syntax");
        }
    }
</script>