desoForm, un plugin jQuery léger pour vérifier vos inputs

Ça faisait bien longtemps que je n’avais pas écrit, et pour cause je préparais quelque chose en douce !
Comme l’annonce le titre, on va parler de validation de formulaire. Parmi les questions qui reviennent souvent en dév. web côté client :

Comment peut-on valider les entrées d’un formulaire avant son envoi ?

En s’y essayant, on est amené à créer « involontairement » un bout de code qui pourrait bien servir de plugin et c’est ce qui m’est arrivé, histoire de remplir une fois de plus ma liste de plugins. Et pour justifier le titre, il fait 1.7 KB !

Voici un exemple de formulaire pouvant profiter de desoForm :

<form action="page.html" method="post" id="monForm">
		<label>Date : </label> 
		<input type="text" name="date" data-regexp="date" data-error="Format date (jj/mm/aaaa)" />
	<hr />
		<label>Date SQL : </label> 
		<input type="text" name="datesql" data-regexp="date-en" data-required="false" data-error="Format date SQL (aaaa-mm-jj)" />
	<hr />
		<label>Courriel : </label> 
		<input type="text" name="mail" data-regexp="email" data-error="Format email" />
	<hr />
		<label>Code postal : </label> 
		<input type="text" name="cp" data-regexp="cp" data-required="false" data-error="Format code postal" />
	<hr />
		<label>Prénom : </label> 
		<input type="text" name="prenom" data-regexp="^[a-zA-Z]{2,10}$" data-error="Test de la regexp ^[a-zA-Z]{2,10}$" />
	<hr />
		<input type="submit" value="Valider" />
</form>

Vous l’aurez compris, il s’agit d’utiliser l’attribut data pour indiquer les spécificités de chaque champ, à noter que c’est disponible uniquement pour les input[type= »text »].

  • data-regexp : prend en valeur une expression régulière valide ou le mot clé d’une expression pré-écrite, il en existe pour l’instant 4 :
    • date : /^(0[1-9]|[12][0-9]|3[01])\/(0[1-9]|1[012])\/[0-9]{4}$/
    • date-en : /^[0-9]{4}\-(0[1-9]|1[012])\-(0[1-9]|[12][0-9]|3[01])$/
    • email : /^[a-z0-9]+([_|\.|-]{1}[a-z0-9]+)*@[a-z0-9]+([_|\.|-]{1}[a-z0-9]+)*[\.]{1}[a-z]{2,6}$/
    • cp : /^((0[1-9])|([1-8][0-9])|(9[0-8])|(2A)|(2B))[0-9]{3}$/
  • data-error : le message d’erreur à afficher si l’expression n’est pas bonne
  • data-required : facultatif, si la valeur est false, le champ pourra être vide pour valider le formulaire

Le gros avantage de ce système, est que vous pouvez mettre vos propres expressions ! Par défaut les champs sont tous obligatoires.

L’appel du plugin :

$(document).ready(function() {
	$('#monForm').desoForm({
		'emptyField': 'Le champ est obligatoire',
		'submit': function($el, ok) {
			if(ok) {
				alert($el.selector + ' prêt à être envoyé avec $el[0].submit(); !');
				//$el[0].submit();
			}
		}
	});
});

Vous avez seulement 2 propriétés à votre disposition :

  • emptyField : le texte à afficher pour informer que le champ est obligatoire, par défaut « Le champ ne doit pas être vide »
  • submit : le callback vous permettant d’envoyer par la suite le formulaire en AJAX, par défaut false

Voir le plugin en action
Voir la page du plugin pour les consignes d’installation

Vous aimerez aussi...