samedi, mars 22 2008

id et class en css : Quid ?

En CSS les "class" et les "id" permettent d'accéder à un objet pour modifier ses fonctionnalités graphique. Pour par exemple changer le fond de base des pages.

Si on écrit ceci : #test { background-color: #FFF; } On intéroge l'objet qui aura pour id "test".

Si on écrit ceci : .test { background-color: #FFF; } On intéroge les objets qui auront pour classe "test".

Vous noterez la différence entre les deux phrases. Les ID ne désigne qu'un seul objet alors que les CLASS désigne plusieurs objets. Vous ne pouvez pas écrire deux ID différent dans une page mais vous pouvez écrire une infinité de CLASS dans une même page.

Ma technique consiste à écrire les div en ID et le reste en CLASS, mais tout dépend du contexte)

samedi, mars 1 2008

Vérifier un formulaire en JavaScript

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.