Discussion :

[irrols]

Bonjour à tous,

Je suis en train d'implanter la validation des champs de formulaire en temps réel sur Bootstrap avec les class has-error, etc ... J'y arrive mais je trouve ma façon de faire un peu lourde, comme c'est la première fois que je mets ça en place j'aimerai savoir si je fais les choses correctement pour partir sur de bonnes bases

Voilà mon HTML pour l'un de mes champs:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
	<div id="pseudo_grp" class="form-group has-feedback">
		<label class="control-label" for="pseudo">Pseudo (3-5 lettres/caractères): </label>
		<input id="pseudo" name="pseudo" type="text" class="form-control" maxlength="5">
		<span class="glyphicon form-control-feedback"></span>
	</div>
	<div class="form-group">
		<input type="button" id="b_val_score" class="btn btn-primary" value="Valider">
	</div>

Et voici mon jQuery:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
		$('#pseudo').keyup(function() {
			var pseudo = $('#pseudo').val();
			var regex = /^[a-zA-Z0-9]{3,5}$/;
 
			if (pseudo.length < 3 || !regex.test(pseudo) ) {
				$('#b_val_score').addClass('disabled');
				$('#pseudo_grp').addClass('has-error');
				$('#pseudo_grp span').addClass('glyphicon-remove');
			}
			else {
				$('#b_val_score').removeClass('disabled');
				$('#pseudo_grp').removeClass('has-error');
				$('#pseudo_grp span').removeClass('glyphicon-remove');
			}
		});

Merci d'avance pour vos commentaires!

[Tsilefy]

C'est pour le sport (pour apprendre) ou pas?

Si ce n'est pas pour le plaisir d'apprendre la validation en js, tu as les validations html5 qui te permettent de définir notamment des patterns. Sinon, tu as aussi le plugin jQuery Validation.

[irrols]

Merci pour ce très bon lien que je ne connaissais pas

En fait ma question concerne plus la partie Bootstrap, et la manière de procéder en pratique pour appliquer ces classes dynamiquement à un champ de formulaire, je voulais juste connaître les bonnes pratiques!