Exercice réalisé lors de la semaine sur Javascript pendant nos cours à Campus Academy.
Nous devions faire un formulaire de contact qu'il faudra vérifier en javascript avant envoie.
Pour cela, j'ai utilisé le framework "Bootstrap" pour les champs du formulaire. Réalisé le 30 avril 2020
Excercice réaliser :
Consignes reçues :
Script JS :
var nbMax=1000;
function longueur() {
var txt=document.formulaire.message.value;
if (txt.length>nbMax) {
document.formulaire.message.value=txt.substring (0,nbMax);
txt=document.formulaire.message.value;
}
document.formulaire.carac.value=nbMax-txt.length;
setTimeout("longueur()", 10);
}
document.getElementById("nbMax").innerHTML = nbMax;
type="text/javascript"> longueur()
const nbCaract = 3;
var nb1 = Math.floor(Math.random() * 11);
var nb2 = Math.floor(Math.random() * 11);
var result = nb1+nb2;
document.getElementById("nb1").innerHTML = nb1;
document.getElementById("nb2").innerHTML = nb2;
function envoyer() {
msgAlert.style.display = "none";
let error = "";
var lastName = document.getElementById("lastName");
var nbLastName = lastName.value.length;
var firstName = document.getElementById("firstName");
var nbFirstName = firstName.value.length;
var message = document.getElementById("message");
var nbMessage = message.value.length;
var poste = document.getElementById("poste").value;
var userResult = document.getElementById("userResult").value;
var userResultClass = document.getElementById("userResult");
var formPoste = document.getElementById("formPoste");
var email = document.getElementById("email").value;
var emailClass = document.getElementById("email");
const regex = "[a-zA-Z0-9.]{3,}@[a-zA-Z0-9]{3,}\\.[a-zA-Z0-9]{2,}";
var devis = document.getElementById("devis");
var contact = document.getElementById("contact");
var tel = document.getElementById("tel");
var time = document.getElementById("time");
var timeValue = document.getElementById("time").value;
//On vérifie le nom
if (nbLastName < nbCaract){
error = error+" nom inférieur à "+nbCaract+" carractère,";
lastName.classList.add("is-invalid");
} else {
lastName.classList.remove("is-invalid");
lastName.classList.add("is-valid");
}
//On vérifie le prénom
if (nbFirstName < nbCaract){
error = error+" prénom inférieur à "+nbCaract+" carractère,";
firstName.classList.add("is-invalid");
} else {
firstName.classList.remove("is-invalid");
firstName.classList.add("is-valid");
}
//On vérifie l'email
if(email.match(regex)){
emailClass.classList.remove("is-invalid");
emailClass.classList.add("is-valid");
} else {
error = error+" email invalide,";
emailClass.classList.add("is-invalid");
}
//On vérifie le poste
if(poste == 'other'){
var other2 = document.getElementById("other2");
var nbOther2 = other2.value.length;
formPoste.classList.add("was-validated");
if(nbOther2 < nbCaract){
error = error+" précisez correctement le poste,";
other2.classList.add("is-invalid");
} else {
other2.classList.remove("is-invalid");
other2.classList.add("is-valid");
}
} else if (poste == ''){
error = error+" le poste est vide,";
formPoste.classList.add("was-validated");
} else {
formPoste.classList.add("was-validated");
}
//On vérifie le motif
if(devis.checked == true || contact.checked == true || tel.checked == true){
if(devis.checked == true){
devisLabel.style.color = "green";
} else {
devisLabel.style.color = "";
}
if(contact.checked == true){
contactLabel.style.color = "green";
} else {
contactLabel.style.color = "";
}
if(tel.checked == true){
telLabel.style.color = "green";
if (timeValue == ""){
error = error+" ajouteur une heure,";
time.classList.add("is-invalid");
} else {
time.classList.remove("is-invalid");
time.classList.add("is-valid");
}
} else {
telLabel.style.color = "";
}
} else {
error = error+" cocher au moins un motif,";
devisLabel.style.color = "red";
contactLabel.style.color = "red";
telLabel.style.color = "red";
}
//On vérifie le message
if (nbMessage < nbCaract){
error = error+" message inférieur à "+nbCaract+" carractère,";
message.classList.add("is-invalid");
} else {
message.classList.remove("is-invalid");
message.classList.add("is-valid");
}
//On vérifie le résulat du calcule
if (userResult != result){
error = error+" le resulat de l'opération est incorrect.";
userResultClass.classList.add("is-invalid");
} else {
userResultClass.classList.remove("is-invalid");
userResultClass.classList.add("is-valid");
}
//On affiche s'il y a une erreur
if (error == ""){
erreur.style.display = "none";
success.style.display = "block";
} else {
erreur.style.display = "block";
success.style.display = "none";
document.getElementById("msgErreur").innerHTML = error;
}
}
function time() {
var checkBox = document.getElementById("tel");
var time = document.getElementById("time");
var timeLabel = document.getElementById("timeLabel");
// Si la checkbox est coché ou non on affiche ou non le champ time
if (checkBox.checked == true){
time.style.display = "block";
timeLabel.style.display = "block";
} else {
time.style.display = "none";
timeLabel.style.display = "none";
}
}
