JS Class
Version 0.1 du 17 jul, 2020
-----===oooOO$OOooo===-----
PHP permet de vérifier un formulaire soumis. Toutefois, ce n'est pas la bonne solution
car une succession d'erreurs peut entraîner de multiples échanges entre client et serveur
et donc, surcharger le serveur et générer du trafic réseau inutile.
Tout ce qui peut être vérifié côté client doit être vérifié avant soumission en laissant
à PHP (côté serveur) le moins de vérifications possibles. Et ceci est le rôle de Javascript.
Tout formulaire soumis devrait donc être vérifié par Javascript AVANT soumission. Le rôle
de cette classe (JS Class) est de générer le javascript permettant de vérifier la
saisie d'un formulaire avant soumission. Cette classe peut être utilisée de deux façons :
- soit être incluse dans la page web pour générer le script de vérification dans
cette page au moment voulu,
- soit être utilisée à part pour générer le script de vérification dont le code sera
copié après génération puis collé dans la page concernée avec ou sans modification,
selon les besoins.
Un membre de la classe permet de selectionner le mode d'utilisation
$tocopy = 0; : inclus JS Class dans la page et génère le script quand cela est nécessaire
$tocopy = 1; : génère le script "isolé" à copier/coller dans la page web
Les caractéristiques de ce formulaire et des contrôles à effectuer seront décrits dans
un fichier texte (ayant pour extension ini) et qui sera utilisé par JS Class pour générer
tout le javascript nécessaire à la volée (include) ou en avance (génération + Copie/Coller).
Soit un formulaire exemple d'inscription :
<form method="post" name="subscription" action="..." onsubmit="return verif()">
Le fichier (INI) décrivant ce formutaire devra avoir pour nom, le nom du formulaire
c'est à dire, pour cet exemple : subscription.ini
Les champs HTML de saisie d'un formulaire peuvent être de différents types
- text
- password
- textarea
- select
- radio
- checkbox
En dehors des champs sur lesquels on clique (radio, checkbox, boutons, etc.) ou que l'on
sélectionne (select), les champs de type "text" dans lesquels on fait de la saisie,
peuvent contenir des noms, des adresses mail, des nombres, des dates, etc. Le fichier de
description du formulaire fera, pour ce même type "text", les distinctions nécessaires
pour effectuer les vérifications en fonction du contenu attendu.
+---------------------+-----------------------+
| types in html input | types in formname.ini |
+---------------------+-----------------------+
| text | text |
| text | date |
| text | hour |
| text | mail |
| text | num |
| select | list |
| radio | radio |
| checkbox | checkbox |
+---------------------+-----------------------+
+-----------+---------------+------------+------------+--------+--------+---------+---------+--------------------------------------+
| fieldname | field label | field type | obligatory | lg min | lg max | val min | val max | example : list of [fields] |
+-----------+---------------+------------+------------+--------+--------+---------+---------+--------------------------------------+
| lname | Last name | text | 1|0 | 2 | 25 | | | lname,Last name,text,1,2,25 |
| fname | First nam | text | 1|0 | 2 | 25 | | | fname,First name,text,1,2,25 |
| bdate | Birthdate | date | 1|0 | | | | | bdate,Birthdate,date,0 |
| idcity | City | list | 1|0 | | | | | idcity,City,list,1 |
| mail | Mail address | mail | 1|0 | 6 | 55 | | | mail,Mail address,mail,1,6,55 |
| price | Selling price | num | 1|0 | 1 | 6 | 1 | 999.99 | price,Selling price,num,1,6,1,999.99 |
| study | Study level | radio | 1|0 | | | | | study,Study level,radio,0 |
| ok | Validation | valid | 1|0 | | | | | ok,Validation,valid,1 |
| sp1;sp2;..| Sports | checkbox | 1|0 | | | | | judo;ski;foot,Sports,checkbox,1 |
| prefh | Prefered hour | hour | 1|0 | | | | | prefh,Prefered hour,1 |
NB: Les valeurs limites sont exclues. Exemple
- price,Selling price,1,3,6,100,500 signifie : "100 < price < 500" et non "100 <= price <= 500"
Si vous voylez inclure ces limites limites, modifiez la classe en ligne 371
Si vous ne voulez pas contrôler ces valeurs limites, ne renseignez pas ces valeurs ou, si vous les mettez, mettez 0.
Peut-être que dans une version future, ces valeurs limites pourront s'appliquer aux types date et heure.
DESCRIPTION DU FICHIER DE DEFINITION DE FORMULAIRE FORM.INI
(pour l'exemple: subscription.ini)
===========================================================
NB : Dans ce fichier, toutes les lignes vides ou commençant par ; ou par # sont considérées comme
des commentaires et sont ignorées.
Il comprend plusieurs sections (le nom des sections peut être indifféremment être écrit
en majuscules ou minuscules) :
- [form]
- [general]
- [fields]
- [chars]
Pour des raisons de codage et afin d'éviter d'alourdir la script avec de multiples tests
(vous êtes développeurs), il n'y aura pas d'espace dans différents cas lorsque que la ligne :
- sera au format : "nom=valeur". pas d'espaces autour du = qui suit le nom de la variable. Exemples :
name=subscription
email=ascii + digits + "@-_+."
- sera au format liste : Pas d'espaces autour des virgules séparatrices. Exemple :
fieldname,labelname,fieldtype,obligatory(1)-or-not(0),lgmin,lgmax,valmin,valmax
#
# subscription.ini
#
[form]
; Cette section contient le nom du formulaire (nom utilisé par javascript) :
name=subscription
[general]
; Cette section contient le nom du pays, désigné par son Top Level Domain (TLD)
; pour le contrôle des dates selon le format date du pays indiqué
; les formats ont été collectés en https://fr.wikipedia.org/wiki/Date
ctrydate=fr
; Cette section acceptera d'autres valeurs pendant le travail de la classe
; lors d'un débuggage celles-ci seront visibles en utilisant la méthode debug()
; $script = new js("subscription");
; $script->debug();
; Les heures peuvent être sur 4 digits (HH:MN) ou sur 6 digits (HH:MN:SS)
; S'il faut contrôler des heures, indiquer le nombre de digits
hour=4
[fields]
; Cette section contient une ligne par contrôle de formulaire avec les éléments suivants :
; - nom du champ
; - label du champ (dans le formulaire HTML)
; - type du champ selon JS Class (indiqué plus haut)
; - saisie obligatoire (=1) ou non (=0)
; - nombre du caractères mimimum
; - nombre de caractères maximum
; - valeur minimale
; - valeur maximale
; Exemple :
bday,Birthday,date,1
email,eMail Address,mail,0,6,50
cont,Contribution,num,1,3,6,100,500
; dans l'exemple ci-dessus : numérique obligatoire, 1 à 6 caractères, séparateur décimal compris, entre 100 et 500 $
; en dehors du label du champ qui peut contenir des espaces, il n'y aura pas d'espace encadrant les virgules
; S'il y a plusieurs cases à cocher à vérifier, les cases à cocher occuperont la place du
; nom du champ et seront séparés par les points virgules ( ; ). Pas d'espaces autour des points-virgule. Exemple :
athl;volley;foot;swim;none,Sports,checkbox,1
[chars]
; Cette section contient les caractères autorisés pour chacun des champs dans lesquels une saisie
; sera effectuée (hors boutons radio, checkbox, select/list). On pourra trouver :
; - ascii (abcdefghijklmnopqrstuvwxyz)
; - letters (abcdefghijklmnopqrstuvwxyzàâäéèêëîïùûüÿçñ)
; - digits (0123456789)
; - des caractères supplémentairs à ajouter
; Si dans la langue utilisée d'autres caractères accentués existent, les rajouter au membre $letters de la classe.
lname=letters + "' -"
email=ascii + digits + "@-_+."
phone=digits + ".- +"
obs=letters + digits + "&\"' ()[]{}-_\\@+-*/?!,.;/:§\n\$£µ%=²"
; Pour des raisons de sécurité, dans les champs de types commentaire évitez > et < qui sont des signes de redirection
; Vous pouvez oublier les caractères autorisés pour les dates et les heures : une expression régulière les teste
; NB : pas d'espace autour du premier =
UTILISATION
===========
NB: La présence des champs obligatoires sera d'office vérifiée. Les champs optionnels seront ignorés
s'ils n'ont pas été saisis. Mais si une saisie a été faite, la validité (caractères autorisés,
longueur, format, etc) sera vérifiée et génèrera un message d'erreur si non conforme.
1) inclusion dans la page contenant le formulaire à vérifier
----------------------------------------------------------
Par défaut la classe génère le javascript qu'il suffira de Copier/Coller au bon endroit.
Si l'on souhaite inclure le script au lieu de coller le javascript, il faudra mettre
le membre $tocopy à 0. Ceci peut se faire lors de l'instanciation tel que :
$script = new js("subscription",0);
à l'endroit où l'on souhaite générer le script (voir le fichier example2.php)
Naturellement le fichier de description du formulaire (ex: subscription.ini) devra avoir été créé
et déposé dans le répertoire de la page à vérifier
2) Copier/Coller du javascript dans la page contenant le formulaire à vérifier
------------------------------------------------------------------------------
Après avoir décrit le formulaire (ex: subscription.ini), créer un petit script tel que :
<?php
require("class.js.php");
$script = new js("subscription"); // $tocopy étant par défaut positionné à 1
?>
le nommer (par exemple) gen_script.php et dans un navigateur taper l'url de celui-ci :
http://www.votresite.com/gen_script.php
Copiez le script généré sur la page web et collez le à l'emplacement voulu dans votre page.
En ligne de commande Linux, vous pouvez taper : php gen_script.php > verif.js
Vous pouvez alors l'intéger dans votre page à l'emplacement voulu avec :
<?php require("verif.js"); ?>
ou copiez et collez les lignes du script à la bonne place
OUTILS
======
Trois méthodes sont publiques :
- debug()
- fmtdate()
- fmthour()
Si JS Class a été instanciée avec une variable $script :
$script = new js("subscription");
- $script->debug() : affichera les tableaux utilisés par JS Classe
- $script->fmtdate() : affichera le format de la date attendue (aide à la saisie)
- $script->fmthour() : affichera le format de l'heure attendue (aide à la saisie)
(NB: pour les deux dernières méthodes voir le fichier example2.php)
DERNIERE INFORMATION
====================
Vous pouvez tester le résultat à la page de démo à l'onglet "Demos".
Sentez-vous libre de me contacter en cas de besoin (aide, bugs, amélioratione, etc.) à :
pierre@fauque.net
Paris, le 17 juillet 2020.
|
Download
