31 lines
1.1 KiB
JavaScript
31 lines
1.1 KiB
JavaScript
const form = document.querySelector(".signup-form");
|
|
const feedback = document.querySelector(".feedback");
|
|
const usernamePattern = /^[a-zA-Z]{6,12}$/;
|
|
|
|
form.addEventListener("submit", (e) => {
|
|
e.preventDefault()
|
|
const username = form.username.value;
|
|
|
|
if (usernamePattern.test(username)) {
|
|
// feedback good info
|
|
feedback.textContent = "that username is valid"
|
|
} else {
|
|
// feedback help info
|
|
feedback.textContent = "username must contain letters only & and be between 6 and 12 charachters long"
|
|
}
|
|
});
|
|
|
|
// live feedback
|
|
form.username.addEventListener("keyup", e => {
|
|
//console.log(e.target.value, form.username.value)
|
|
console.log(e);
|
|
if(usernamePattern.test(e.target.value)){
|
|
// wenn das Username nicht dem Pattern entpricht, wird das Username-Fenster rot gefärbt
|
|
// wenn es dem Pattern entspricht, wird es green gefärbt
|
|
// console.log("passed")
|
|
form.username.setAttribute("class","success")
|
|
}else{
|
|
// console.log("failed")
|
|
form.username.setAttribute("class","error")
|
|
}
|
|
}) |