14.11.2021, 16:03
Hallo zusammen
Ich bin gerade dabei, ein Formular mit JavaScript zu validieren. Grundsätzlich funktioniert das auch soweit, bis auf die Radio Buttons. Ich verstehe leider einfach nicht, was der EventListener alles beinhalten muss und wie dann die eigentliche Funktion, welche prüft, ob die Radio Buttons geklickt wurden, aussehen muss. Hier einmal mein bisheriger Code:
Kann mir hier vielleicht jemand weiterhelfen?
Vielen herzlichen Dank.
Ich bin gerade dabei, ein Formular mit JavaScript zu validieren. Grundsätzlich funktioniert das auch soweit, bis auf die Radio Buttons. Ich verstehe leider einfach nicht, was der EventListener alles beinhalten muss und wie dann die eigentliche Funktion, welche prüft, ob die Radio Buttons geklickt wurden, aussehen muss. Hier einmal mein bisheriger Code:
Code:
const name = document.getElementById('name');
const email = document.getElementById('email');
const message = document.getElementById('message');
const btnSend = document.getElementById('submit');
const quality = document.getElementById('qualityRadio');
const prices = document.getElementsByName('prices');
const errPrices = document.getElementById('errPrices');
const errQuality = document.getElementById('errQuality');
let qualityAlreadyFilled = false;
let pricesAlreadyFilled = false;
let nameAlreadyFilled = false;
let emailAlreadyFilled = false;
let messageAlreadyFilled = false;
function showError(input, message) {
const formControl = input.parentElement;
const errorMessage = formControl.querySelector('span');
errorMessage.innerText = message;
formControl.className = 'form-control error';
}
function showSuccess(input) {
const formControl = input.parentElement;
formControl.className = 'form-control success';
}
name.addEventListener('keyup', () => {
nameAlreadyFilled = true;
checkValidity();
});
email.addEventListener('keyup', () => {
emailAlreadyFilled = true;
checkValidity();
});
message.addEventListener('keyup', () => {
messageAlreadyFilled = true;
checkValidity();
});
quality.addEventListener('click', () => {
qualityAlreadyFilled = true;
checkValidity();
});
function isQualityValid() {
let inpQuality = document.querySelectorAll('input[name="quality"]');
if (inpQuality === '') {
console.log('not selected');
errQuality.innerText = 'Please select an option';
return false;
} else {
errQuality.innerText = '';
return true;
}
}
function isNameValid() {
if (!nameAlreadyFilled) {
return false;
}
let inpName = name.value;
if (inpName === '') {
showError(name, 'Name cannot be blank.');
return false;
} else {
showSuccess(name);
return true;
}
}
function isEmailValid() {
if (!emailAlreadyFilled) {
return false;
}
const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
let inpEmail = email.value;
if (inpEmail === '') {
showError(email, 'E-mail address cannot be blank.');
return false;
} else if (!inpEmail.match(re)) {
showError(email, `'${inpEmail}' is not a valid e-mail address.`);
return false;
} else {
showSuccess(email);
return true;
}
}
function isMessageValid() {
if (!messageAlreadyFilled) {
return false;
}
let inpMessage = message.value.replace(/\s+/g, '');
if (inpMessage.length < 50) {
showError(message, 'Message should be at least 50 characters.');
return false;
} else {
showSuccess(message);
return true;
}
}
function checkValidity() {
btnSend.disabled = (isNameValid() && isEmailValid() && isMessageValid()) ? !(isQualityValid()) : true;
}
Kann mir hier vielleicht jemand weiterhelfen?
Vielen herzlichen Dank.