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

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.

Les librairies d'effet visuel (JavaScript)

BlAcKbUrRy — Wed, 27 Feb 2008 14:00:00 +0100

Le Web évolue, les sites internet aussi, vous trouverez rarement des sites sans aucun effet visuel actuellement. Dans ce billet, je vais vous montrer quelque librairies intéressantes d'effet en JavaScript.

Nous allons voir les grosses librairies JavaScript, celles qui rassemble énormément d'effet.

Mootools

Mootools est une librairie intéressent, elle regroupe 31 effets (texte et calque) et offre un grand champ d'action, la mise en place de la librairie se fait très facilement en ajoutant vos événements dans la fonction suivante :

window.addEvent('domready', function() { // Vous mettez ici tout vos événements });

Les demos vous montrant la liste des effets et large et vous permet de commencer tout de suite. Mootools est un bon choix si vous avez besoin de beaucoup d'effet graphique sur votre site.

Scriptaculous

Scriptaculous est une librairie moins intéressante que Mootools à mon gout, elle ne regroupe pas assez d'effet mais reste complète, il suffit de regarder le site pour ce rendre compte que cette librairie est utilisable partout. Elle est surtout intéressante pour les effets sur le texte qu'elle propose ainsi que son Drag & Drop. Les demos des effets est aussi complète.

Prototype et Effect

Voila la librairie que j'utilise le plus. Elle est très soft au niveau des fonctionnalités mais permet de rajouter quelques petit effets sympathique à votre site internet. Il ne faut pas vous attendre a du Drag & Drop mais plutôt a des effets (calque et texte) pas mal du tout.

De toute façon, toutes ces librairies se ressemble, il faut choisir celle qui convient le mieux à votre usage afin de ne pas surcharger le site.

Agrandir un champ texte lors du clic de la souris

BlAcKbUrRy — Wed, 27 Feb 2008 13:46:00 +0100

Hier pour Exist il fallait que j'agrandisse le champ de recherche lorsque ce champ avait le focus. J'ai donc chercher la solution et j'ai fait ça :

<input type="text" onblur="this.size = 20" onfocus="this.size = 50">

Détail du code

Les évenements :
- OnBlur: Permet de savoir lorsque le champ perd le focus
- OnFocus : Permet de savoir lorsque le champ a le focus

L'attribut size dans les champs texte permet de définir la taille.

this en javascript réfère a l'objet ou le javascript est utilisé.