Ajax funktioniert nur mit alert

[Arnie]

Hallo liebe User, ich hoffe Ihr könnt mir weiterhelfen.
Ich habe eine Login seite, die die Logindaten mit Ajax weiter sendet. Zur zeit funktioniert dies aber nur wenn ein Alert dazwischen steht. Ich habe schon ähnliche Fehler gesucht und gefunden aber ich kann die Lösungen nicht adaptieren. Jetzt hoffe ich, dass ihr mir den Fehler erklären könnt und mir sagt/zeigt wie man diesen verhindern kann.

Zur veranschaulichung hier der Code:

@import models.db.Studiengang

@(loggedIn: String)(studiengaenge: List[String])

@main("Login"){

    <div class="title">
        <h1>Campusduell</h1>
    </div>

    <div class="container">
        <div class="card"></div>
        <div class="card">
            <h1 class="title">Login</h1>
            <form>

                <div class="input-container">
                    <input type="text" id="loginUsername"/>
                    <label for="loginUsername">Nutzername</label>
                    <div class="bar"></div>
                </div>

                <div class="input-container">
                    <input type="password" id="loginPassword"/>
                    <label for="loginPassword">Passwort</label>
                    <div class="bar"></div>
                </div>
                <div class="button-container">
                    <button id="login"><span>anmelden</span></button>
                </div>
            </form>
        </div>

        <div class="card alt">
            <div class="toggle"></div>
            <h1 class="title">Registrierung
                <div class="close"></div>
            </h1>
            <form>
                <div class="input-container">
                    <input type="text" id="registUsername"/>
                    <label for="registUsername">Nutzername</label>
                    <div class="bar"></div>
                </div>
                <div class="input-container">
                    <input type="password" id="registPassword"/>
                    <label for="registPassword">Passwort</label>
                    <div class="bar"></div>
                </div>
                <div class="input-container">
                    <input type="password" id="controlPassword"/>
                    <label for="controlPassword">Kontroll-Passwort</label>
                    <div class="bar"></div>
                </div>
                <div class="input-container">
                    <input type="text" id="email"/>
                    <label for="email">E-Mail</label>
                    <div class="bar"></div>
                </div>


                <div class="input-container">
                    <div class="Registrierung">
                        Geschlecht:
                        <select id = "geschlecht">
                            <option value="1" selected>M</option>
                            <option value="2" selected>W</option>
                        </select><br><br>
                        Studiengang:
                        <select id = "studiengang">
                            @for(studiengang <- studiengaenge){
                               <option value = @studiengang selected> @studiengang </option>
                            }
                        </select>
                    </div>
                </div>

                <div class="button-container">
                    <button id = "validation"><span>Los geht's</span></button>
                </div>
            </form>
        </div>
    </div>


    

    <script>

            checkLoggedIn(@loggedIn);
//            Dieser Code bewirkt, dass die Navigationsleiste nicht angezeigt wird
            document.getElementById("navigationsleiste").style.visibility = "hidden";


            var username;
            var password;
            var email;
            var geschlecht;
            var studiengang;
            var result;

            $("#validation").click(function(){
                username = $("#registUsername").val();
                password = $("#registPassword").val();
                email = $("#email").val();
                geschlecht = $("#geschlecht").val();
                studiengang = $("#studiengang").val();
                sendRegister(username, password, email, geschlecht, studiengang);
            });

            $("#login").click(function(){
                username = $("#loginUsername").val();
                password = $("#loginPassword").val();
                sendLogin(username, password);
                // alert("Mit diesem alert funkioniert es.")
            });


            $('.toggle').on('click', function() {
                $('.container').stop().addClass('active');
            });

            $('.close').on('click', function() {
                $('.container').stop().removeClass('active');
            });

    </script>
}

Auch den von der ausgelagterten login.js möchte ich euch nicht vorenthalten, falls da der Fehler ist

 function sendRegister(username, passwort, email, geschlecht, studiengang){

            $.ajax({
                url: '/registration',
                method: 'POST',
                data: JSON.stringify({
                    "username": username,
                    "passwort": passwort,
                    "email": email,
                    "geschlecht": geschlecht,
                    "studiengang": studiengang,
                }),
                success: function(data){
                    $('#result').text("Success");
                },
                error:function(data){
                    $('#result').text("Failure");
                },
                dataType: 'json',
                contentType: 'application/json'
            });
            return false;
        }

        function sendLogin(username, passwort, loggedIn){

            $.ajax({
                url: '/login',
                method: 'POST',
                data: JSON.stringify({
                    "username": username,
                    "passwort": passwort,
                }),
                success: function(data){
                    $('#result').text("success");

                },
                error:function(data){
                    $('#result').text("Failure");
                },

                dataType: 'json',
                contentType: 'application/json'
            });
                return false;
                }


        function registrieren(){

        function vergleichPasswort(registPassword, controlPassword) {
            return (registPassword == controlPassword)
                ? true : alert("Das Passwort wurde richtig eingegeben!")
                ? false : alert("Die Passwörter sind nicht identisch");

        }

        function passwort(form) {
            if(vergleiche("batman", form.pass.value))
                alert("das Passwort wurde richtig eingegeben!");
            else {
                alert("das Passwort ist falsch!");
                form.pass.select();
                form.pass.focus();
            }
        }

        }

        /*
         Diese Funktion checkt, ob der User schon eingeloggt ist
         Wenn ja und er ist auf der Login Seite -> Home seite geleitet
         Wenn nein und er ist nicht auf der Login Seite -> Login seite geleitet
          */
        function checkLoggedIn(login){
            var site = window.location.pathname;

            if(site != "/login" && login != "1"){
                alert("Der User ist nicht eingeloggt und wird zur Login-Seite weitergeführt!");

                window.location = "/login";
            }
            else if(site == "/login" && login == "1"){
                window.location = "/home";
            }
        }

Ich hoffe ihr könnt mir helfen.

[mikdoe]

*freigeschaltet*

[kkapsner]

Entferne mal die <form>s (sind sowieso nicht funktional) oder gib' deinen <button>s ein type="button".

PS: Warum arbeitest du mit globalen Variablen?
PPS: Bei einem JS-Problem ist immer ratsam, den Quelltext, der auch beim Browser ankommt, zu zeigen und nicht den Code für irgendeine Templateengine.