Il est parfois difficile de retrouver dans le DOM la ou les balises qui doivent être modifiées.
Je vous présente ici quelques astuces pour vous aider dans cette tâche. Certaines n'utilisent que les sélecteurs jQuery alors que d'autres font appel, en plus, à des fonctions jQuery.
Dans ces exemples, le code HTML de base est :
<div class="container">
<div class="row">
<div class="col-md-12">
Veuillez fournir les informations sur la formation.
</div>
</div>
</div>
<form method="post" id="formulaire-formation" ...>
<div class="form-group row">
<label for="titre" class="col-form-label col-sm-3">* Titre : </label>
<div class="col-sm-5">
<input class="form-control" id="titre" name="titre" type="text" maxlength="255">
<div class="help-block erreur-titre"></div>
</div>
</div>
<div class="form-group row">
<label for="niveau" class="col-form-label col-sm-3">* Niveau : </label>
<div class="col-sm-9">
<select class="form-control" id="niveau" name="niveau">
<option value="">Veuillez choisir...</option>
<option value="1">Débutant</option>
<option value="2">Intermédiaire</option>
<option value="3">Avancé</option>
</select>
</div>
</div>
<div class="form-group row">
<div class="col-sm-3"></div>
<label for="public" class="form-check-label col-sm-9">
<input type="checkbox" id="public" name="public">
<span class="textecheckbox">Formation publique</span>
</label>
</div>
<div class="form-group row">
<div class="col-sm-3"></div>
<div class="col-sm-9">
<input type="submit" class="btn btn-primary" value="Enregistrer">
</div>
</div>
</form>
Plusieurs éléments peuvent être retrouvés simplement à l'aide de sélecteurs jQuery.
Par exemple, pour retrouver l'information entrée dans le formulaire à partir de l'identifiant de la balise de saisie :
titre = $('#titre').val();
Si la balise <input> n'avait pas eu d'identifiant, on aurait pu travailler avec son attribut name. On prendra soin de cibler le formulaire au cas où il y aurait plusieurs formulaires dans la page Web.
titre = $('#formulaire-formation input[name=titre]').val();
La fonction find() permet de retrouver des balises HTML parmi les enfants de la ou les balises placées devant l'appel. Si d'autres balises correspondent au sélecteur jQuery mais ne font pas partie des balises devant l'appel, elles ne seront pas sélectionnées.
Par exemple, pour trouver toutes les balises qui ont la classe row à l'intérieur du formulaire :
$lignesDuFormulaire = $('#formulaire-formation').find('.row');
Dans cet exemple, la division avec la classe row qui n'est pas dans le formulaire ne sera pas sélectionnée.
On obtiendra le même résultat si on utilise un sélecteur jQuery avec deux paramètres. Les paramètres seront alors séparés par une virgule.
Ex :
$lignesDuFormulaire = $('.row', '#formulaire-formation');
ou :
$formulaire = $('#formulaire-formation');
...
$lignesDuFormulaire = $('.row', $formulaire);
La fonction children() fait un travail semblable à find() sauf qu'elle ne cherche que parmi les enfants directs.
Si plus d'un niveau séparent la balise du départ de celle recherchée, seul find() pourra faire le travail.
Ex :
$formulaire = $('#formulaire-formation');
...
titre = $formulaire.find('input[name=titre]').val(); // traverse tout l'arbre du DOM à partir de l'élément courant. On pourra donc retrouver un enfant d'un enfant...
Ceci ne fonctionnera pas car il y a plus d'un niveau entre le formulaire et la balise input :
// traverse un seul niveau d'enfants
Pour retrouver le formulaire du bouton qui vient d'être cliqué :
$('input[type=submit]').click(function (event) {
event.preventDefault();
var $formulaire = $(this).parents("form:first");
...
});
La valeur de l'option sélecionnnée dans une balise <select> peut être retrouvé comme suit :
niveau = $('select[name=niveau] option:selected').val();
et son texte :
description = $('select[name=niveau] option:selected').text();
Si on a déjà un objet jQuery ou un objet du DOM (par exemple, une variable qui pointe sur le <select>), on peut retrouver l'option sélectionnée comme ceci :
$select = $('select[name=niveau]');
...
var niveau = $select.children('option:selected').val();
Cet extrait permet d'afficher une erreur de validation puis de mettre en évidence toute la zone qui contient le libellé, la zone de saisie et le message d'erreur.
Puisqu'il généralise la recherche de la division à mettre en évidence, il pourrait facilement être intégré dans une boucle qui valide chaque entrée du formulaire.
if ($('input [name=titre]').val()) == '') {
var $divErreur = $('#formulaire-formation').find('.erreur-titre');
// affiche l'erreur dans la division correspondante
$divErreur.html('Le titre est requis.');
// ajoute la classe pour que l'élément HTML et le message apparaissent en rouge
$divErreur.parents('.form-group:first').addClass('has-error');
}
▼Publicité
