Archives du mot-clef jQuery

Comment vérifier des code postaux en javascript avec jQuery

Code javascript qui sert a vérifier un code postal selon un format (exemple: LLCCC, L = lettre , C = chiffre), ainsi qu’a limiter au maximum les erreurs de saisies en ne permettant aucune erreur,
gère plusieurs format par pays voir par exemple pour l’Angleterre qui a plusieurs format de code postaux.

case "GB":
  var params = {
    'format' : ['LCCLL', 'LLCCLL' , 'LCCCLL', 'LLCCCLL', 'LCLCLL', 'LLCLCLL'],
    'required' : true
}

jquery.zipcode.js

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142

$(document).ready(function() {
	nice_format = function (format) {
	    var str = '';
	    $.each(format, function() {
		    str += this.replace('L', 'A').replace('C', '1');
		});
	    return str
	}
 
	$.fn.zipCode = function(countryCode) {
	    var id = '#'+$(this).attr('id');	    
	    switch (countryCode) {
	    case "FR":
		var params = {
		    'format' : 'CCCCC',
		    'required' : true
		}
		break;
	    case "US":
		var params = {
		    'format' : 'CCLLLLLL',
		    'required' : true
		}
		break;
	    case "GB":
		var params = {
		    'format' : ['LCCLL', 'LLCCLL' , 'LCCCLL', 'LLCCCLL', 'LCLCLL', 'LLCLCLL'],
		    'required' : true
		}
		break;
	    case "CO":
		var params = {
		    'required' : false
		}
		break;
	    case "AR":
		var params = {
		    'required': false,
		    'format' : 'CCCC',
		}
		break;
	    case "PT":
		var params = {
		    'required' : true,
		    'format' : "CCCC-CCC"
		}
		break;
	    default:
		var params = {
		    'required' : false
		}
		break;
	    }
	    if(params['format'] != undefined && $.isArray(params['format'])) {
		var size = 0;
		var str_format = '';
		$.each(params['format'], function() {
			if(this.length > size) {
			    size = this.length;
			}
			str_format += nice_format(this)+'  ';
		    });
	    } else if(params['format'] != undefined) {
		var size = params['format'].length;
		var str_format = nice_format(params['format']);
	    }	    
	    if(params['required'] && params['format'] != undefined) {
		$(id).css('width', size*12).attr('size', size+2);
		$(id + 'Format').html('format: '+str_format);
	    } else if(!params['required'] && params['format'] != undefined) {
		$(id).attr('size', size+2);
		$(id + 'Format').html('format: '+str_format);
	    } else {
		$(id).attr('size', 12);
		$(id + 'Format').html('');
	    }
	    return params;
	}
 
	$.fn.isValid = function(format) {
	    var value = $(this).val();
	    var patternArray = {
		'L' : '[a-zA-Z]{1}',
		'C' : '[0-9]{1}',
		'-' : '[-]{1}'
	    }
 
	    if(format !== undefined) {
		if(!$.isArray(format)) {
		    var match = true;
		    if(value.length > format.length)
			return false;
		    for(i = 0; i < value.length;i++) {
			var pattern = patternArray[format.charAt(i)];
			var regex = new RegExp(pattern);
			if(!regex.test(value.charAt(i))) {
			    match = false;
			}
		    }
		    return match;
		} else {
		    var match = 0;
		    $.each(format, function() {
			    var count = 0;
			    for(i = 0; i < value.length;i++) {
				var pattern = patternArray[this.charAt(i)];
				var regex = new RegExp(pattern);
				if(!regex.test(value.charAt(i)) || value.length > this.length) {
				    count++;
				}
			    }
			    if(count == 0) {
				match++;
			    }
			});
		    if(match > 0)
			return true;
		    else
			return false;
		}
	    } else {
		return true;
	    }
	}
 
	$('select#country').change(function() {
		$('input#zipCode').val('');
		$('input#zipCode').zipCode($('select#country').val());
	    });
 
	$('input#zipCode').keyup(function() {
		params = $('input#zipCode').zipCode($('select#country').val());
		while(!$('input#zipCode').isValid(params.format)) {
		    $('input#zipCode').val($('input#zipCode').val().substr(0, $('input#zipCode').val().length-1));
		}
	    });
 
	$('input#zipCode').ready(function() {
		$('input#zipCode').after('&nbsp;<span class="comments" id="zipCodeFormat"></span>');
		$('input#zipCode').zipCode($('select#country').val());
	    });
    });

Comment valider un formulaire avec jQuery

Valider un formulaire en javascript est quelque chose qu’on a tous fais 1000 fois et si on se simplifiai la tache en ne le fesant plus et qu’on laissait jQuery nous aider a le faire une bonne fois pour toute.

Ca serai pas bien ?

et la vous allez me dire , VOUI !

en gros tous les champs qu’on veut obligatoire porteront la class css « required » (class= »required ») ça ne vous empêche pas de lui attribuer d’autre class hein ^^ (class= »blu required niceclass »)

La fonction de validation jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

jQuery.fn.verifyForm = function() {
    var error = false;
    $('.required').each(function() {
            if(this.value == '') {
                $(this).css('border', '1px solid red');
                $('label[for="'+ this.id +'"]').css('color', 'red');
                if(!error) {
                    error = true;
                }
            } else {
                if($(this).css('border') == '1px solid red') {
                    $(this).css('border', '');
                    $('label[for="'+ this.id +'"]').css('color', '');
                }
            }
        });
    return error;
}

Un peu de html pour que vous puissiez tester (vous voyez que je ne suis pas si fainéant ^^)

1
2
3
4
5
6

<form id="form" method="post" action="post.php">
<input type="text" name="login" id="login" class="required"/><label for="login">Login</label>
<input type="password" name="password" id="password" class="password required"/><label for="password">Mot de passe</label>
<input type="checkbox" name="rememberme" id="rememberme" class="checkbox"/><label for="rememberme">Se souvenir de moi ?</label>
<input type="submit" value="Envoyer"/>
</form>

Comment qu’on s’en sert père castor ?!

1
2
3
4
5
6
7
8
9
10
11
12

$(document).ready(function() {
        $('#form').submit(function() {
                    var error = $('form').verifyForm();
                    if(!error) {           
                        $('#form').submit();
                        return true;
                    } else {
                        alert('Merci de remplir tous les champs marqués en rouge.');
			return false;
                    }
		})
});

A vous de testez et de voir ce que vous pouvez en faire (celui au fond qui a dit « rien ! » sort !!!)

Rien de bien méchant, pour une validation plus avancer des champs comme la validation des emails, la comparaison des mots de passe, etc… , c’est a vous de jouer.

bisous