Vérifier un formulaire en JavaScript

BlAcKbUrRy — Sat, 01 Mar 2008 22:59:00 +0100

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.

NTRM - Sécurité Informatique, Hardware, Programmation - formulaire

Vérifier un formulaire en JavaScript