jQuery plugin desoForm

Présentation

Ce plugin permet de valider vos input[type="text"] à l’aide de vos propres expressions régulières ou en utilisant celles déjà écrites.

Installation

Inclure jQuery, le plugin desoForm et son CSS dans votre page HTML :

<link rel="stylesheet" type="text/css" href="css/jquery.desoform.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/desoform.js"></script>

Voici un formulaire à valider :

<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>

Voici les définitions des attributs data HTML :

  • 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

Appel du plugin

Utiliser le plugin en tant que méthode du formulaire.

$(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

Rendu

Voir la démonstration

Télécharger

jQuery
jquery.desoform.min.js (1.7 KB) jquery.desoform.js (3 KB)
CSS
jquery.desoform.min.css (407 B) jquery.desoform.css (483 B)
Images
accept.png et cross.png