form.addEventListener('submit', e => { e.preventDefault();
checkInputs(); });
function checkInputs(){ // trim to remove the whitespaces const usernameValue = username.value.trim(); const emailValue = email.value.trim();
if(usernameValue === '') { setErrorFor(username, 'Please, enter your username.'); } else { setSuccessFor(username); }
if(emailValue === '') { setErrorFor(email, 'Please, enter your email'); } else if (!isEmail(emailValue)) { setErrorFor(email, 'If you dont put a real email address, you will have more chances to send me your message with a carrier pigeon.'); } else { setSuccessFor(email); }
}
function setErrorFor(input, message) { const formControl = input.parentElement; const small = formControl.querySelector('small'); formControl.className = 'form-control error'; small.innerText = message; }
function isEmail(email) { return /^(([^<>()\[\]\\.,;:\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,}))$/.test(email); }
Puis le message d'alerte :
const message =
"Thank you for submitting your request. We will respond shortly. Or not...";
document
.getElementById("form")
.addEventListener("submit", function (event) {
event.preventDefault();
alert(message);
});
Mais quand je fusionne les deux, ça bug. L'alerte ne s'affiche pas ou l'alerte boucle. Voici mon code complet :
const form = document.getElementById("form");
const username = document.getElementById("username");
const email = document.getElementById("email");
form.addEventListener("submit", (e) => {
e.preventDefault();
checkInputs();
});
function checkInputs(){
// trim to remove the whitespaces
const usernameValue = username.value.trim();
const emailValue = email.value.trim();
if (usernameValue === "") {
setErrorFor(username, "Please, enter your username.");
} else {
setSuccessFor(username);
}
if (emailValue === "") {
setErrorFor(email, "Please, enter your email");
} else if (!isEmail(emailValue)) {
setErrorFor(
email,
"If you dont put a real email address, you will have more chances to send me your message with a carrier pigeon."
);
} else {
setSuccessFor(email);
}
}
function setErrorFor(input, message) {
const formControl = input.parentElement;
const small = formControl.querySelector("small");
formControl.className = "form-control error";
small.innerText = message;
}
function setSuccessFor(input) {
const formControl = input.parentElement;
formControl.className = "form-control success";
const message =
"Thank you for submitting your request. We will respond shortly. Or not...";
document.getElementById("form").addEventListener("submit", function (event) {
event.preventDefault();
alert(message);
});
}
function isEmail(email) {
return /^(([^<>()\[\]\\.,;:\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,}))$/.test(
email
);
}
Ça serait incroyable si vous pouviez m'aider....
Merci à vous et bonne journée :)
A voir également:
Message d'alerte après vérification d'étapes d'un formulaire