Vous serez confronter très souvent a la création de formulaire. Une fois que l'utilisateur a rentrer tout les champs il vous faudra vérifier l'intégriter des données, les champs d'email ainsi que les champs texte, il faut bien vérifier que chaque champs a été bien rentrer par les utilisateurs, voici une fonction JavaScript vous permettant de vérifier les champs :
function verifyChamp(form, champ, mail) { if (mail == false) { if (trim(document.forms[form].elements[champ].value) == "") { document.forms[form].elements[champ].className = 'wrong_element'; return false; } else { document.forms[form].elements[champ].className = 'right_element'; } } else { if (trim(document.forms[form].elements[champ].value) == "") { document.forms[form].elements[champ].className = 'wrong_element'; form = false; } else { if(!validation_mail(document.forms[form].elements[champ].value)) { document.forms[form].elements[champ].className = 'wrong_element'; form = false; } else { document.forms[form].elements[champ].className = 'right_element'; } } } }
Il vous suffira ensuite d'ajouter un êvenemtn onsubmit à votre formulaire ainsi que deux classes (wrong_element et rigt_element) à votre fichier CSS. Dans l'êvement il vous faudra créer une fonction comme ceci :
function verif_feedback() { form = true; form = verifyChamp("feedback","email", true); form = verifyChamp("feedback","texte", false); return form; } <form onsubmit="return verif_feedback()" name="feedback"> <label>Email : </label><input type="text" name="email"> <br /> <label>Texte : </label><input type="text" name="texte"> <br /> <input type="submit" name="Envoyer !"> </form>
Et pour le CSS voici un petit exemple :
.wrong_element { border: solid 1px #c24949; background-color: #ffbcbc; } .right_element { border: solid 1px #49c24f; background-color: #bcffbf; }
Et voila votre champ deviendra rouge si il n'est pas correct et vert si il est correct.