Bonjour,
Je souhaite réaliser une vérification dynamique de mon formulaire. J'ai donc inséré du JS directement dans ma page pour mettre un fond vert et un cadre noir sur les champs corrects et un fond rouge, un cadre noir et une div qui apparait au-dessus du formulaire, dans le cas ou le champ est incorrect. Le problème est le suivant : Pour afficher les erreurs, je dois valider. Comment faire une vérification dynamique de champs (sans onSubmit()...) ?
Voici mon code :
Modifié par Kodeur (13 Jan 2017 - 15:10)
Je souhaite réaliser une vérification dynamique de mon formulaire. J'ai donc inséré du JS directement dans ma page pour mettre un fond vert et un cadre noir sur les champs corrects et un fond rouge, un cadre noir et une div qui apparait au-dessus du formulaire, dans le cas ou le champ est incorrect. Le problème est le suivant : Pour afficher les erreurs, je dois valider. Comment faire une vérification dynamique de champs (sans onSubmit()...) ?
Voici mon code :
<!-- Début du formulaire de contact -->
<section class="form">
<div class="wrapper">
<section class="page_contact">
<div class="title">
<span class="separator"></span>
<h2>Formulaire de contact</h2>
</div>
</section>
<div id="form-main">
<div id="form-div">
<form class="form" id="form1" name="formulaire" onSubmit="return check();" method="post" > <!--action="traitement_formulaire.php"-->
<p class="name">
<input name="nom" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Nom" id="name" />
</p>
<p class="email">
<input name="email" type="text" class="validate[required,custom[email]] feedback-input" id="email" placeholder="Email" />
</p>
<p class="message">
<textarea name="text" class="validate[required,length[6,300]] feedback-input" id="comment" placeholder="Votre message"></textarea>
</p>
<div class="submit">
<input type="submit" value="ENVOYER LE MESSAGE" id="button-blue"/>
<div class="ease"></div>
</div>
</form>
</div>
</div>
<script language="JavaScript">
//forms
function check() {
var msg = "";
//Vérification du mail s'il n'est pas vide on vérifie le . et @
if (document.getElementById("email").value != "") {
indexAroba = document.getElementById("email").value.indexOf('@');
indexPoint = document.getElementById("email").value.indexOf('.');
if ((indexAroba < 0) || (indexPoint < 0)) {
//dans le cas ou il manque soit le . soit l'@ on modifie la couleur d'arrière plan du champ mail et définissons un message d'alerte
document.getElementById("email").style.backgroundColor = "#FF4000";
document.getElementById("email").style.border = "2px solid #000;";
msg += "Le mail est incorrect\n";
}
}
//Notre champs mail est vide donc on change la couleur et on défini un autre message d'alerte
else {
document.getElementById("email").style.backgroundColor = "#DF7401";
msg += "Veuillez saisir votre mail.\n";
}
//ici nous vérifions si le champs nom et vide, changeons la couleur du champs et définissons un message d'alerte
if (document.getElementById("name").value == "") {
msg += "Veuillez saisir votre nom\n";
document.getElementById("name").style.backgroundColor = "#DF7401";
}
else {
document.getElementById("email").style.backgroundColor = "#39cf85";
}
//meme manipulation pour le champ commentaire
if (document.getElementById("comment").value == "") {
msg += "Veuillez saisir votre message\n";
document.formulaire.message.style.backgroundColor = "#FF4000";
}
//Si aucun message d'alerte a été initialisé on retourne TRUE
if (msg == "") return(true);
//Si un message d'alerte a été initialisé on lance l'alerte
else {
alert(msg);
return(false);
}
}
</script>
</section><!-- Fin du formulaire -->Modifié par Kodeur (13 Jan 2017 - 15:10)