Factorisation de code JQuery

Bonjour,

Je développe un projet avec le Zend Framework. Mon formulaire est généré avec Zend_Form.
Pour valider mes formulaires à la volée j'appelle un contrôleur ajax avec le code suivant, il me renvoie les erreurs éventuelles sur le champ email.
Ceci marche quel que soit le formulaire du moment qu'il y a un champs email quelle que soit sa configuration.

J'aimerai que cela marche pour n'importe quel champ.
Je pourrais envisager de récupérer toutes les valeurs des champs et de tout valider d'un coup, mais ce sera plus lourd. Auriez vous une autre solution ?

$(document).ready(function () {
    
    $('#email').keyup(function () {
        
        if (this.value != this.lastValue) {
            
            // Initialisation du timer
            if (this.timer) {
                clearTimeout(this.timer);
            }
            
            this.timer = setTimeout(function () {
                
                // Ajout du loader
                $('#email').after('<img src="/img/ajax-loader.gif" height="16" width="16" />');
                
                // Requête ajax
                $.ajax({
                    url: 'http://www.domain.fr/' + $('html').attr('lang') + '/ajax/check-email',
                    data: 'form=' + $('form').attr('id') + '&email=' + $('#email').val(),
                    dataType: 'json',
                    type: 'post',
                    // Gestion si ok
                    success: function (response) {
                        $("#email-element>img").remove();
                        $("#email-element>ul").remove();
                        if(response.messages != null) {
                            $('#email').after('<ul class="' + response.type + '" ajax"><li>' + response.messages + '</li></ul>');
                        }
                    },
                    // Gestion si ko
                    error: function (response) {
                        $("#email-element>img").remove();
                        $("#email-element>ul").remove();
                    }
                });
            }, 500);
            
            this.lastValue = this.value;
        }
    });
});

Bonjour,

ça ne sera pas plus lourd. puisque tu fais tout en une requête et pas en n requêtes...

Tout dépend de ce que tu veux. Une validation au submit ou une validation au changement d'input.

En fait j'ai surtout peur que ce soit plus lourd en reflow.
du coup j'ai factorisé comme ca :

function testFields(field) {

    if (field.value != this.lastValue) {
        
        // Initialisation du timer
        if (this.timer) {
            clearTimeout(this.timer);
        }
        
        this.timer = setTimeout(function () {
            
            // Ajout du loader
            $('#' + field.id).after('<img src="/img/ajax-loader.gif" height="16" width="16" />');
            
            // Requête ajax
            $.ajax({
                url: 'http://www.domain.fr/' + $('html').attr('lang') + '/ajax/check-email',
                data: 'form=' + $('form').attr('id') + '&' + field.id + '=' + field.value,
                dataType: 'json',
                type: 'post',
                // Gestion si ok
                success: function (response) {
                    $('#' + field.id + '-element>img').remove();
                    $('#' + field.id + '-element>ul').remove();
                    if(response.messages != null) {
                        $('#' + field.id).after('<ul class="' + response.type + '" ajax"><li>' + response.messages + '</li></ul>');
                    }
                },
                // Gestion si ko
                error: function (response) {
                    $('#' + field.id + '-element>img').remove();
                    $('#' + field.id + '-element>ul').remove();
                }
            });
        }, 200);
        
        this.lastValue = field.value;
    }
}

$(document).ready(function () {
    
    // Récupération des champs non cachés
    $("form input").each(function(){
        if((this.type != 'hidden') && (this.type != 'submit')) {
            $(this).keyup(function() {
                testFields(this);
            });
        }
    });
});

Ca fonctionne nickel, pour tous les champs de tous mes formulaires. A condition d'avoir un seul formulaire par page, ce qui ne me gène pas pour le moment, mais qu'il faudrait adapter.

La version multiform !

function testFields(form, field) {
    
    if (field.value != this.lastValue) {
        
        // Initialisation du timer
        if (this.timer) {
            clearTimeout(this.timer);
        }
        
        this.timer = setTimeout(function () {
            
            // Ajout du loader
            $('#' + field.id).after('<img src="/img/ajax-loader.gif" height="16" width="16" />');
            
            // Requête ajax
            $.ajax({
                url: $('base').attr('href') + '/' + $('html').attr('lang') + '/ajax/check-form' + '/form/' + form.id + '/field/' + field.id + '/value/' + field.value + '/format/json',
                data: '',
                dataType: 'json',
                type: 'post',
                // Gestion si ok
                success: function (response) {
                response = response.data;
                    $('#' + field.id + '-element>img').remove();
                    $('#' + field.id + '-element>ul').remove();
                    if(response.messages != null) {
                        $('#' + field.id).after('<ul class="' + response.type + '" ajax"><li>' + response.messages + '</li></ul>');
                    }
                },
                // Gestion si ko
                error: function (msg, string) {
                    //alert(msg + ' : ' + string);
                    $('#' + field.id + '-element>img').remove();
                    $('#' + field.id + '-element>ul').remove();
                }
            });
        }, 200);
        
        this.lastValue = field.value;
    }
}

$(document).ready(function () {
    
    // Récupération des formulaires
    $('form').each(function() {
        var form = this;
        // Récupération des champs non cachés
        $('#' + form.id + ' input').each(function() {
            if((this.type != 'hidden') && (this.type != 'password') && (this.type != 'submit')) {
                $(this).keyup(function() {
                    testFields(form, this);
                });
            }
        });
    });
});

Modifié par martinsupiot (26 Sep 2009 - 11:05)