Création d'une barre de progression

Version imprimable

Bonjour à tous,

Je me présente ced 25 ans et passionné par le développement web.

Je débute avec jquery et j' ai donc commencer par une petite vérification de formulaire, certains me diront pour quoi ne pas utiliser un plugin !
La réponse est simple " je débute " il est donc utile de partir sur de bonne bases avant de s' aventurer dans un plugin que je devrais modifier.

Je viens sur le site car je suis confronté à un problème.

J' aimerais construire une barre de progression à partir de mon code de vérification de formulaire avec une opération dynamique qui change de résultat à chaque fois que l' utilisateur remplis de formulaire.

Exemple : champ valide = 1
champ non valide = 0

Voila une partie du code en question je prend la date comme référence :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 $('#day').change(function(){ if($('#day').val().length=="" ) { $('#day').css('border-color','#ff0000'); var battery6 = 0; } else { $('#day').css('border-color','#ffffff'); var battery6 = 1; } }); $('#month').change(function(){ if($('#month').val().length=="" ) { $('#month').css('border-color','#ff0000'); var battery7 = 0; } else { $('#month').css('border-color','#ffffff'); var battery7 = 1; } }); $('#year').change(function(){ if($('#year').val().length=="" ) { $('#year').css('border-color','#ff0000'); var battery8 = 0; } else { $('#year').css('border-color','#ffffff'); var battery8 = 1; }
Vous pouvez constater que j' ai déjà commencer à placer des Var battery pour faire l' opération.

Mais du fais que mon code se divise en plusieurs fonction je n' arrive pas à crée une fonction qui ferais l' opération du résulta dynamique.

pour afficher un résultat qui changerais en fonction du résulta de l' opération.

Dans l' exemple du code le résulta donnerait :

1 = 1%
1+1 = 2 = 50%
1+1+1= 3 = 100%

Merci d' avance de votre aide.

Bonjour

Un exemple simpliste à améliorer, il ne fonctionne plus si l'utilisateur change d'avis :

Code:

1
2
#barreID { width: 300px; height: 20px; border: 1px solid black; }
.progression { width: 0px; height: 20px; background-color: red; }

Code:

1
2
3
4
5
6
7
<input id="day" type="text" value="">
<input id="month" type="text" value="">
<input id="year" type="text" value="">
 
<div id="barreID">
	<div class="progression"></div>
</div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
$( function(){
 
	function barreProgression( bool ){
		var jObj = $( "div.progression" );
 
		if ( bool ){
			jObj.css( "width", jObj.width() + 100 );
		}
	}
 
	$( '#day' ).change( function(){
		var jObj = $( this );
 
		if ( jObj.val().length < 1 ){
			jObj.css( 'border-color', '#ff0000' );
		} else {
			jObj.css( 'border-color', '#ffffff' );
			barreProgression( true );
		}
	});
 
	$( '#month' ).change( function(){
		var jObj = $( this );
 
		if ( jObj.val().length < 1 ){
			jObj.css('border-color','#ff0000');
		} else {
			jObj.css('border-color','#ffffff');
			barreProgression( true );
		}
	});
 
	$( '#year' ).change( function(){
		var jObj = $( this );
 
		if( jObj.val().length < 1 ){
			jObj.css('border-color','#ff0000');
		} else {
			jObj.css('border-color','#ffffff');
			barreProgression( true );
		}
	});
 
});

16/02/2013, 01h48
ced3E

Un grand merci à toi j' étais parti sur un truc compliqué alors que la solution était simple, pour ce qui est du changement d' avis de l'utilisateur refaire la même fonction avec - 100 et mettre true dans le if :ccool:

Aprés test je note un problème.

Exemple lastname :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 $('#lastname').keyup(function(){ var lastnameVal = $(this).val(); var jObj = $( this ); if( jObj.val().length > 16) { jObj.css('border-color','#ff0000'); } else if(!letterReg.test(lastnameVal)) { jObj.css('border-color','#ff0000'); } else if( jObj.val().length < 4) { jObj.css('border-color','#ff0000'); } else { $(".arrow2").hide(); $('.error2').hide(); jObj.css('border-color','#ffffff'); barreProgression( true ); } });
A chaque fois que la condition est remplie l' incrémentation se fait.
Sauf que la condition peut se faire plusieurs fois ce qui a pour effet l' incrémentation de plusieurs barres.

Je réfléchi à une condition pour stopper l' incrémentation au bout de la 1 ère validation.

16/02/2013, 12h08
danielhagnoul

Bonjour

Je vous ai donné ce bout de code simpliste, qui ne remplit pas son rôle, dans le but de le torturer. Étudiez jQuery en testant sur lui les styles, les effets, les animations.

Faire une barre de progression fonctionnelle serait réinventer la roue. Lorsque vous aurez torturé ce bout de code en apprenant jQuery, je vous conseille de passer à jQuery UI et de commencer avec le widget UI Progressbar.
16/02/2013, 13h27
ced3E

Je vais donc passer à jQuery UI encore merci:ccool:
24/02/2013, 14h35
ced3E

Bonjour

Je réouvre le topic afin de ne pas polluer le forum avec le même poste:ccool:

Après avoir regarder jQuery UI, je ne trouve pas que cela soit mieux que le simple code de départ pour une utilisation graphique dans le seul but de rendre le formulaire plus jolie.

Par contre je n' arrive toujours pas à faire en sorte que l' incrémentation se produise qu' une fois, même si je fais en sorte de simplifier le code de telle sorte que l' incrémentation se produit que à partir de 5 caractères par exemple.

Bonjour,

Pour éviter ce problème d'incrémentation, je te propose de tester l'intégralité des champs à chaque changement sur le formulaire.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$(document).ready(function(){
var fields = $("#form").find(":input").not(":submit");
    fields.on("change", function updateProgressBar(){
        var total = fields.size(), valid = 0;
        fields.each(function(i, field){            
            if(isValid(field)){
                valid++; 
                field.className="correct";                
            } else if(field.value.length > 0){
                field.className="incorrect";
            }
        });
        $('#progressBar').css("width", Math.round( $("#progressBarTotal").width() * valid/total) );
        $("#formCompletionPercentage").text( Math.round( 100 * valid/total) );    
        $("#submit").attr("disabled", valid < total);
   });
});
 
function isValid(field){    
    switch(field.id){
        case 'day': return field.value>0 && field.value<=31;
        case 'month': return field.value>0 && field.value<=12;
        case 'year': return field.value>0 && field.value<=9999;
        default: return field.value !== "";    
    }
}

Une démo ici : http://jsfiddle.net/2AdfG/2/

Aussi n'hésite pas à te servir des attributs de validation en HMTL5 required et pattern: http://dmouronval.developpez.com/tut...es-html5/#LIII

@Bovino: merci pour l'edit, je privilégie les sources de developpez.com quand je les trouve ;)

26/02/2013, 15h34
ced3E

Merci avec ça je pense pouvoir finir mon formulaire.

Je confirmerais quand j' aurais le temps de modifier mon code :ccool: