var txtUsername = document.querySelector("#username");
var txtPassword = document.querySelector("#password");
var txtRetypePassword = document.querySelector("#retype_password");

var errorMessageUsername = document.querySelector("#userNameMessage");
var errorPasswordMessage = document.querySelector("#passwordMessage");
var errorRetypePasswordMessage = document.querySelector("#retypePasswordMessage");

txtPassword.addEventListener("input",checkPass);
txtRetypePassword.addEventListener("input" , checkRetypedPassword)
txtUsername.addEventListener("input" ,checkUsername);

function checkUsername(){
    if (txtUsername.value.includes("@")){
        errorMessageUsername.textContent = "Benutzername darf kein @ enthalten!";
        errorMessageUsername.style.color = "red";
    }else
        errorMessageUsername.textContent = "";
}

function checkPass(){
    if (txtPassword.value.length < 6){
        errorPasswordMessage.textContent = "Passwort ist zu kurz";
        errorPasswordMessage.style.color = "red";
    }else{
        errorPasswordMessage.textContent = "";
    }

}

function checkRetypedPassword(){
    if (txtRetypePassword.value !== txtPassword.value){
        errorRetypePasswordMessage.textContent = "Passwörter stimmen nicht überein!";
        errorRetypePasswordMessage.style.color = "red";
    }else{
        errorRetypePasswordMessage.textContent = "";
    }
}