Bonjour !

Je suis assez fan de JQuery, et j'ai développer mon plugin. Je voulais savoir ce que vous en pensiez, et comment voudriez-vous l'améliorer.

LegForm

Le but du plugin est d'effectuer facilement des vérifications de contenu de formulaire en Javascript. Donc bien sûr, comme c'est en Javascript, cela ne remplace pas la vérification coté serveur.

Téléchargement

Version de développement :
http://leglopin.free.fr/ozimg/files/jquery.legForm.js

Version de production (compressée) :
http://leglopin.free.fr/ozimg/files/jquery.legForm-min.js

Utilisation

L'utilisation est simple : les règles pour chaque input sont à insérer dans un attribut "rules" :

<input type="text" name="pseudo" id="pseudo" title="Pseudo" rules="required|alpha_dash|max_length[5]|min_length[2]" />

L'attribut "title" sera utilisé pour l'affichage de l'erreur à l'utilisateur. Par exemple :

Le champ "Pseudo" est requis

Ici, Pseudo est la valeur de title.

Références des règles

Voilà toutes les règles :

Rule	Arguments ?	Description	Exemple
required	Non	L'élément est requis (ne peut être vide ou décoché)	-
valid_mail	Non	L'élément doit être une adresse e-mail valide	-
alpha	Non	L'élément ne doit contenir que des lettres	-
alpha_numeric	Non	L'élément ne doit contenir que des lettres ou des chiffres	-
alpha_dash	Non	L'élément ne doit contenir que lettres, chiffres, underscores (_) ou tirets	-
natural	Non	L'élément doit être un chiffre entre 0 et 9 inclus	-
natural_no_zero	Non	L'élément doit être un chiffre entre 1 et 9 inclus	-
integer	Non	L'élément doit être un nombre	-
min_length	Oui	Minimum de caractères de l'élément	min_length[5]
max_length	Oui	Maximum de caractères de l'élément	max_length[20]
exact_length	Oui	L'élément doit contenir exactement ce nombre de caractères	exact_length[8]

Les utilisateurs de CodeIgniter pourront retrouver le même principe que leur bibliothèque de validation de formulaire.

Une fois vos règles définies, vous devez maintenant lier votre formulaire à legForm. Voilà comment :

$(function(){            
        $('#demo').legForm();
    });

Gérer les erreurs

Le problème, c'est que pour le moment, vous ne dites rien à l'utilisateur, l'envoi du formulaire est simplement annulé. Pour l'affichage, vous avez deux fonctions de callback vous renvoyant les erreurs : input_callback et end_callback. input_callback effectue la fonction pour chaque input traité, alors que end_callback est appelé à la fin du traitement, possédant toutes les erreurs. Par exemple :

$(function(){            
        $('#demo').legForm({
            input_callback: function(field, errors) {
                                var output = '<ul>';
                                
                                for(i in errors) {
                                    output += '<li>'+errors[i]+'</li>';
                                }
                                        
                                output += '</ul>';
                                        
                                $('#'+field+'_error').html(output);
                            }
        });
    });

Ici, pour chaque input, un élément du DOM correspondant à nomduchamp_error (par exemple pseudo_error) sera rempli de l'erreur obtenue. Bien sûr, comme errors est un Array, vous pouvez choisir la manière dont vous voulez l'utiliser.

Avec end_callback :

$(function(){            
        $('#demo').legForm({
            end_callback: function(all_errors) {
                                var output = '<ul>';
                                
                                for(i in all_errors) {
                                    var input_errors = all_errors[i];
                                    
                                    for(j in input_errors) {
                                        output += '<li>'+input_errors[j]+'</li>';
                                    }
                                }
                                        
                                output += '</ul>';
                                        
                                $('#errors').html(output);
                            }
        });
    });

Ici, toutes les erreurs du formulaire seront consignées dans l'élément du DOM d'id errors.

La variable all_errors contient un Array à deux dimensions :

all_errors = Array(
    input1_errors = Array(
        ...,
        ...
    ),
    input2_errors = Array(
        ...,
        ...
    ),
    input3_errors = Array(
        ...,
        ...
    )
)

Vous pouvez utiliser les deux manières en même temps si vous le souhaitez :

$(function(){            
        $('#demo').legForm({
            input_callback: function(field, errors) {
                                var output = '<ul>';
                                
                                for(i in errors) {
                                    output += '<li>'+errors[i]+'</li>';
                                }
                                        
                                output += '</ul>';
                                        
                                $('#'+field+'_error').html(output);
                            },
            end_callback: function(all_errors) {
                                var output = '<ul>';
                                
                                for(i in all_errors) {
                                    var input_errors = all_errors[i];
                                    
                                    for(j in input_errors) {
                                        output += '<li>'+input_errors[j]+'</li>';
                                    }
                                }
                                        
                                output += '</ul>';
                                        
                                $('#errors').html(output);
                            }
        });
    });

A faire

• Gestion des textarea et des select
• Création de la règle match[nomduchamp] pour vérifier la concordance entre deux champ (par exemple mot de passe et sa confirmation)
• Création de la règle regex[regex] pour vérifier une regex

Voilà, je pense avoir fait le tour. Si vous ne parvenez pas à comprendre soit certains points de mon message, soit comment utiliser LegForm, n'hésitez pas à poser la question ici. Et si vous avez des idées, des remarques ou des critiques à faire, faites-les (en développant votre idée bien sûr ).

A+ !

C'est bizarre ce truc... Ça veut dire que tous les utilisateurs de cette libraire n'auront jamais un site web strictement valide W3C ? Ils obtiendront toujours un "there is no attribute "rules"" ?

Je n'y avait pas pensé ...

Aurais-tu une autre idée ?

Merci

Euh bein nan, j'ai pas trop d'idée pour résoudre ça, ça m'a tilté ce truc.

Si je peux te donner un avis perso, rien que pour ça je n'utiliserai pas ta libraire, et c'est dommage. (Bon après, je n'utilise plus JQuery, je préfère le JS pur, je code aussi rapidement avec)


EDIT : C'est une super idée d'avoir repris la form_validation de CI car elle est très intuitive côté utilisateur.

Pas d'autres avis ?

Sinon pourquoi ne pas faire un input de type hidden ayant pour nom le_premier_rules avec comme value les règles.

Bonne idée. Mais du coup, ça fait le double de données POST inutiles ...

Merci !

Tu le supprimes par JavaScript après au pire.