Changeset 144

Show
Ignore:
Timestamp:
05/20/08 15:51:14 (6 months ago)
Author:
llaumgui
Message:
 
Files:
1 modified

Legend:

Unmodified
Added
Removed

  • javascript/mootools_1.1.x/verif_form/verif_form.src.js

    r133 r144  
    11/* 
    22 * #################### BEGIN LICENSE BLOCK #################### 
    3  * This file is part of myUtils. 
    43 * Copyright (c) 2007 Guillaume Kulakowski and contributors. 
    54 * 
    6  * MyUtils is free software; you can redistribute it and/or modify 
     5 * verifForm is free software; you can redistribute it and/or modify 
    76 * it under the terms of the GNU General Public License as 
    87 * published by the Free Software Foundation; either version 2 
    98 * of the License, or (at your option) any later version. 
    109 * 
    11  * MyUtils is distributed in the hope that it will be useful, 
     10 * verifForm is distributed in the hope that it will be useful, 
    1211 * but WITHOUT ANY WARRANTY; without even the implied warranty 
    1312 * of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See 
    … …  
    2221 * 
    2322 * verifForm 
    24  *  
    25  * Fonction permettant de vérifier les formulaire en mootools. 
    26  * 
    27  * --------------------------------------------------------  
     23 * 
     24 * Fonction permettant de vérifier les formulaires avec MooTools. 
     25 * 
     26 * -------------------------------------------------------- 
    2827 *  
    2928 * Dépendances : 
     29 *      Composant de MooTools 1.1.1 : 
    3030 *              - Element.Event 
    3131 *              - Element.Selector 
    … …  
    3333 *              - Window.DomReady 
    3434 * 
     35 * -------------------------------------------------------- 
     36 * 
     37 * Changelog : 
     38 *              - 1.4 : 
     39                        + Ajout de la fonction isChecked 
     40                        + Ajout de l'écriture dans Firebug ;-) 
     41 *              - 1.3 : 
     42 *                      + Ajout des hooks de tests et de submit 
     43 *              - 1.2 : 
     44 *                      + Gestion du champ email de confirmation 
     45 *              - 1.1 : 
     46 *                      + Passage des paramètres dans un hash() 
     47 *                      + Redirection vers le message facultative et configurable 
     48 *                      + Message standard d'erreur 
     49 *                      + initialize devient init 
     50 *              - 1.0 : 
     51 *                      + Première release 
     52 * 
    3553 * --------------------------------------------------------  
    3654 * 
    3755 *  Utilisation : 
    38  *              - Ajouter la classe "required" au champs requis 
    39  *              - Ajouter la classe "mail" au champs email 
    40  *              - Définir un Hash avec les messages d'erreur 
     56 *              1. Ajouter la classe CSS "required" au champs requis 
     57 * 
     58 *              2. Ajouter la classe CSS "email" au champs email 
     59 * 
     60 *              3. Ajouter la classe CSS "confirmEmail" au champs email de confirmation 
     61 * 
     62 *              4. Ajouter la classe CSS "confirmPassword" au champs de confirmation du mot de passse 
     63 * 
     64 *              5. Ajouter la classe CSS "checked" au champs case à cocher 
     65 * 
     66 * Remarque : Possibilité de combo class="required email confirmEmail" 
     67 * 
     68 *              6. Définir un Hash avec les messages d'erreur 
     69 * <code>var formMsgError               = new Hash({  
     70 *              idChamps1_EMPTY:                'Le champs "Mail" est vide', 
     71 *      idChamps2_EMPTY:                'Le champs "Nom" est vide' 
     72 * });</code> 
     73 * 
     74 *              7. Lancez le contrôle des formulaires au domready 
    4175 * <code>window.addEvent('domready', function(){ 
    42  *   var verif = new verifForm( form2Verif, btnSubmit, addMessageAfter, formMsgError );                                                         ); 
    43  *              verif.initialize(); 
     76 *      var params = new Hash({ 
     77 *                      // Obligatoires 
     78 *                      'form2Verif':                   $('form2Verif'), 
     79 *                      'btnSubmit':                    $('btnSubmit'), 
     80 *                      'addMessageHere':               $('anchorTop'), 
     81 *                      'formMsgError':                 $('msgError'), 
     82 *                      // Optionnels 
     83 *                      'msgErrorRedirect':             'top' 
     84 *              }); 
     85 *              var verif = new verifForm( params ); 
     86 *              verif.init(); 
    4487 * });</code> 
    4588 * 
     89 *              8. Possibilité des rajouter des tests (hook) : 
     90 * <code>verif.hookTest = function hookTest() { 
     91 *              // Mettre mon hook ici :-) 
     92 *      };</code> 
     93 * 
     94 *              9. Possibilité de rajouter des actions avant de soumettre 
     95 * le formulaire (hook) : 
     96 * <code>verif.hookSubmit = function hookSubmit() { 
     97 *              // Mettre mon hook ici :-) 
     98 *      };</code> 
     99 * 
    46100 * --------------------------------------------------------  
    47101 * 
    48102 * @author Guillaume Kulakowski <guillaume_AT_llaumgui_DOT_com> 
    49  * @version 1.0 
     103 * @version 1.4 
     104 * @param params Hash Liste des paramètres 
     105 * 
    50106 * -------------------------------------------------------- */ 
    51 function verifForm( form2Verif, btnSubmit, addMessageAfter, formMsgError ) { 
    52  
    53         this.form2Verif                         = form2Verif;           // Formulaire à contrôler 
    54         this.btnSubmit                          = btnSubmit;            // Bouton submit 
    55         this.addMessageAfter            = addMessageAfter;      // Ajouter le message d'erreur après 
    56         this.formMsgError                       = formMsgError;         // Messages d'erreur 
    57         this.valid                                      = true;                         // Le formulaire remplit-il toutes les conditions ? 
    58         this.msgError                           = new Array();          // Evntuelles erreurs 
    59  
    60  
    61         /* 
    62          * Initialisation de la fonction. 
     107function verifForm( params ) { 
     108 
     109        this.params                                     = params;                                                                       // Tableau des paramètres 
     110        this.form2Verif                         = this.params.get('form2Verif');                        // Elément du formulaire à contrôler 
     111        this.btnSubmit                          = this.params.get('btnSubmit');                         // Elément du bouton submit de validation 
     112        this.addMessageHere                     = this.params.get('addMessageHere');            // Ajouter le message d'erreur après l'élément 
     113        this.formMsgError                       = this.params.get('formMsgError');                      // Hash contenant les messages d'erreur 
     114         
     115        this.valid                                      = true;                                                                         // Le formulaire remplit-il toutes les conditions ? 
     116        this.msgError                           = new Array();                                                          // Listes des éventuelles erreurs 
     117 
     118 
     119 
     120        /* 
     121         * Initialisation de la fonction. Pseudo constructeur. 
    63122         * 
    64123         * @author Guillaume Kulakowski <guillaume_AT_llaumgui_DOT_com> 
    65124         * @since 1.0 
    66125         */ 
    67         this.initialize = function initialize() { 
    68  
     126        this.init = function init() { 
     127                 
     128                this.consoleLog("verifForm initialized"); 
     129                 
    69130                this.btnSubmit.addEvent( "click", function(e) { 
    70                         e = new Event(e); 
    71                         this.msgError = new Array(); 
    72                         this.valid = true; 
     131                                                 
     132                        this.msgError   = new Array(); 
     133                        this.valid              = true; 
    73134                         
    74135                        if ( $('error_list') ) { 
    … …  
    79140                        this.isRequired(); 
    80141                        this.isMail(); 
    81                         this.submit(e);                  
     142                        this.isSameMail(); 
     143                        this.isSamePassword(); 
     144                        this.isChecked(); 
     145                        this.hookTest();        /* Possibiliter de faire des hooks pour rajouter des contrôles */ 
     146 
     147                        this.submit(e); 
    82148                }.bind(this)); 
    83149        }; 
    … …  
    97163 
    98164                        if ( input.value == "" ) { 
    99                                 this.valid      = false; 
    100                                 input.addClass('error'); 
    101                                 this.msgError[this.msgError.length]             = input.id+"_EMPTY"; 
     165                                this.inputError( input, "EMPTY" ); 
    102166                        } 
    103167                        else { 
    … …  
    121185                        if ( input.value != "" ) { 
    122186                                if ( !input.value.test("^(.+)@(.+)\\.(.+)") ) { 
    123                                         this.valid      = false; 
    124                                         input.addClass('error'); 
    125                                         this.msgError[this.msgError.length]             = input.id+"_NOTMAIL"; 
     187                                        this.inputError( input, "NOTMAIL" ); 
    126188                                } 
    127189                                else { 
    … …  
    135197 
    136198        /* 
     199         * Vérification des champs email de confirmation. 
     200         * 
     201         * @author Guillaume Kulakowski <guillaume_AT_llaumgui_DOT_com> 
     202         * @since 1.2 
     203         * @TODO : Voir si on ne peut pas utiliser la fonction plusieur fois 
     204         */      
     205        this.isSameMail = function isSameMail() { 
     206 
     207                var inputIsSameMail             = $ES('input.confirmEmail', this.form2Verif); 
     208         
     209                if ( inputIsSameMail.length == 2 ) { 
     210                        if ( inputIsSameMail[0].value.clean() != inputIsSameMail[1].value.clean() ) { 
     211                                inputIsSameMail[0].addClass('error'); 
     212                                this.inputError( inputIsSameMail[1], "NOTSAMEMAIL" ); 
     213                        } 
     214                        else { 
     215                                inputIsSameMail[0].removeClass('error'); 
     216                                inputIsSameMail[1].removeClass('error'); 
     217                        } 
     218                } 
     219        }; 
     220         
     221         
     222         
     223        /* 
     224         * Vérification des champs confirmation du mot de passe. 
     225         * 
     226         * @author Guillaume Kulakowski <guillaume_AT_llaumgui_DOT_com> 
     227         * @since 1.2 
     228         */      
     229        this.isSamePassword = function isSamePassword() { 
     230 
     231                var inputIsSamePassword         = $ES('input.confirmPassword', this.form2Verif); 
     232         
     233                if ( inputIsSamePassword.length == 2 ) { 
     234                        if ( inputIsSamePassword[0].value.clean() != inputIsSamePassword[1].value.clean() ) { 
     235                                inputIsSamePassword[0].addClass('error'); 
     236                                this.inputError( inputIsSamePassword[1], "NOTSAMEPAWD" ); 
     237                        } 
     238                        else { 
     239                                inputIsSamePassword[0].removeClass('error'); 
     240                                inputIsSamePassword[1].removeClass('error'); 
     241                        } 
     242                } 
     243        }; 
     244         
     245         
     246         
     247        /* 
     248         * Vérification des champs case à cocher. 
     249         * 
     250         * @author Guillaume Kulakowski <guillaume_AT_llaumgui_DOT_com> 
     251         * @since 1.4 
     252         */ 
     253        this.isChecked = function isChecked() { 
     254         
     255                var inputIsChecked              = $ES('.checked', this.form2Verif); 
     256                inputIsChecked.each( function(input) { 
     257                        if ( !input.checked ) { 
     258                                this.inputError( input, "NOTCHECKED" ); 
     259                        } 
     260                        else { 
     261                                input.removeClass('error'); 
     262                        } 
     263                }.bind(this)); 
     264        }; 
     265 
     266 
     267 
     268        /* 
     269         * Possibilité de faire des hooks pour rajouter des tests. 
     270         * 
     271         * @author Guillaume Kulakowski <guillaume_AT_llaumgui_DOT_com> 
     272         * @since 1.3 
     273         */ 
     274        this.hookTest = function hookTest() { 
     275                this.consoleLog("No hookTest"); 
     276        }; 
     277 
     278 
     279 
     280        /* 
     281         * Possibilité de faire des hooks pour rajouter des actions avant de soumettre. 
     282         * 
     283         * @author Guillaume Kulakowski <guillaume_AT_llaumgui_DOT_com> 
     284         * @since 1.3 
     285         */ 
     286        this.hookSubmit = function hookSubmit() { 
     287                this.consoleLog("No hooksubmit"); 
     288        }; 
     289 
     290 
     291 
     292        /* 
     293         * traitement du champ sur une erreure. 
     294         * 
     295         * @author Guillaume Kulakowski <guillaume_AT_llaumgui_DOT_com> 
     296         * @since 1.4 
     297         * @param input         imput   Champ en erreur 
     298         * @param suffix        string  Suffix de l'ereur 
     299         */ 
     300        this.inputError = function inputError ( input, suffix ) { 
     301         
     302                this.valid      = false; 
     303                input.addClass('error'); 
     304                if ( input.id != "" ) { 
     305                        this.msgError[this.msgError.length]             = input.id + "_" + suffix; 
     306                } 
     307                else { 
     308                        this.consoleLog("No id for input"); 
     309                } 
     310        } 
     311 
     312 
     313 
     314        /* 
     315         * Ecriture dnas la console de fireBug du champ sur une erreure. 
     316         * 
     317         * @author Guillaume Kulakowski <guillaume_AT_llaumgui_DOT_com> 
     318         * @since 1.4 
     319         * @param msg   string  Suffix de l'ereur 
     320         */ 
     321        this.consoleLog = function consoleLog ( msg ) { 
     322                 
     323                if( console.log ) { 
     324                        console.log(msg); 
     325                } 
     326        } 
     327         
     328         
     329        /* 
    137330         * Validation du formulaire des champs email. 
    138331         * 
    139332         * @author Guillaume Kulakowski <guillaume_AT_llaumgui_DOT_com> 
    140333         * @since 1.0 
     334         * @param e event       Evenement MooTools+ 
    141335         */ 
    142336        this.submit = function submit( e ) { 
    143337 
    144                 if ( this.valid == false ) { 
    145                          
    146                         ul_error        = new Element('ul'); 
    147                         ul_error.setProperty('id', 'error_list'); 
    148                         ul_error.injectAfter( this.addMessageAfter ); 
    149  
    150                         this.msgError.each(function(item, index){ 
    151                                 li      = new Element('li', {} ) ; 
    152                                 ul_error.adopt( li ); 
    153                                 li.setText( this.formMsgError.get(item) ); 
    154                         }); 
     338                if ( this.valid == false  ) { 
     339                        e = new Event(e); 
     340                         
     341                        if ( this.msgError.length > 0 ) { 
     342                                ul_error        = new Element('ul'); 
     343                                ul_error.setProperty('id', 'error_list'); 
     344                                ul_error.injectTop( this.addMessageHere ); 
     345 
     346                                this.msgError.each(function(item, index){ 
     347                                        li      = new Element('li', {} ) ; 
     348                                        ul_error.adopt( li ); 
     349                                        msg     = this.formMsgError.get(item); 
     350                                        if ( msg == null ) { 
     351                                                msg = "Error on " + item; 
     352                                        } 
     353                                        li.setText( msg ); 
     354                                }); 
     355                        } 
     356                        else { 
     357                                this.consoleLog( "msgError length <= 0"); 
     358                        }  
     359                         
    155360                        e.stop(); 
    156                         document.location.href='#top_message'; 
     361                         
     362                        /* Redirection sur le message d'erreur */ 
     363                        if ( this.params.get('msgErrorRedirect') != null ) { 
     364                                document.location.href='#' + this.params.get('msgErrorRedirect'); 
     365                        } 
     366                } 
     367                else { 
     368                        this.hookSubmit(); 
    157369                } 
    158370        };