Bootstrap et validation de formulaire avec jQuery
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:
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:
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!
