Validation d'un formulaire côté client
**************************************
Il est possible de faire une validation avant l'envoi d'un formulaire sur le serveur via le naviguateur
Il existe un plugin jquery nommé *jqueryvalidation* qui permet de faire ce genre de chose
un exemple simple sur la notion de "required"
.. code-block:: html
le message "submitted!" n'apparait qu'une fois que tout les élements sont validés
Il est possible de mettre en place:
- des règles spécifiques
- des messages spécifiques
il faut rajouter des feuilles de styles pour avoir des messages plus lisibles
un exemple intégrant des règles propres
.. code-block:: html
les principales règles sont:
* required – Makes the element required.
* remote – Requests a resource to check the element for validity.
* minlength – Makes the element require a given minimum length.
* maxlength – Makes the element require a given maxmimum length.
* rangelength – Makes the element require a given value range.
* min – Makes the element require a given minimum.
* max – Makes the element require a given maximum.
* range – Makes the element require a given value range.
* email – Makes the element require a valid email
* url – Makes the element require a valid url
* date – Makes the element require a date.
* dateISO – Makes the element require a ISO date.
* number – Makes the element require a decimal number.
* digits – Makes the element require digits only.
* creditcard – Makes the element require a creditcard number.
* equalTo – Requires the element to be the same as another one
et on peut en rajouter avec l'utilisation par exemple d'expression régulière
création de la règle regex
.. code-block:: javascript
jQuery.validator.addMethod(
"regex",
function(value, element, regexp) {
if (regexp.constructor != RegExp)
regexp = new RegExp(regexp);
else if (regexp.global)
regexp.lastIndex = 0;
return this.optional(element) || regexp.test(value);
},"erreur expression reguliere"
);
utilisation de la règle regex
.. code-block:: javascript
"montelephone": {
"required": true,
"regex": /^(\+33\.|0)[0-9]{9}$/
}
.. note::
pour avoir des messages en français il suffit d'intégrer le fichier messages_fr.js dans la page html