Discussion :

[pierrot10]

Bonjour à tous,

Je cherche depuis un moment comment trouver un label qui est le premier à précéder une class "requiered".

Voici mon code

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
 
<div class="row">
<div class="col-xs-5 col-md-4">
<label>Nom</label>
</div>
<div class="col-xs-7 col-md-8">
<div class="input text required">
<input id="BasketLastname" class="form-control" type="text" required="required" maxlength="100" name="data[Basket][lastname]">
</div>
</div>
</div>

J'ai essayé plusieurs function comme

Code :

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

1
2
$('form div.required').closest("label",$(this)).append("<span class='text-danger'> *</span>");
  $('form div.required').prev('label').css('border','1px solid #ff22ff');

Y-a-t-il une autre fonction qui répondrait à mon besoin?

[Spartacusply]

La deuxième que tu as mises doit bien fonctionner (et est propre qui plus est). Si tu ne veux être certain de ne retourner que le premier, rajoute ceci :

Code :

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

$('form div.required').prev('label:first').css('border','1px solid #ff22ff');

[Bovino]

Si le code HTML était formaté correctement, on verrait facilement que la balise <label> n'est pas parente de la balise <input> (d'ailleurs, je ne vois vraiment pas l'utilité d'un label dans le contexte donné...).
Il faut donc remonter de deux crans et chercher le frère précédent. Sauf que cette solution est assez bancale car en cas de modification de la structure HTML, ça va être difficile de s'y retrouver...

[pierrot10]

Hello,
je vous remercie, J'avais en effet mal copié mon code HTML et je viens de le corriger.
Le but est de remonter jusqu'à trouvé le premier label, mais en effet, c'est un peu bancal, je l'avoue.

[Spartacusply]

Au temps pour moi, en effet avec l'indentation j'avais pas fait gaffe...

Selon moi, le code qui est ici est généré à partir d'un framework (CakePhP ?), en d'être plus couplé à bootstrap, d'où sa structure un peu complexe..

[pierrot10]

Selon moi, le code qui est ici est généré à partir d'un framework (CakePhP ?), en d'être plus couplé à bootstrap, d'où sa structure un peu complexe..

C'est exactement ca

[pierrot10]

J'ai trouvé une alternative avec CakepPHP mais je me trouve face une autre problématique et qui est la même. Alors je continue avec ce post. Si c'est ok
Voici mon code HTML

Code HTML :

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

1
2
3
4
<div class="col-sm-8">
<input id="BasketLastname" class="form-control form-error" type="text" required="required" value="" maxlength="100" name="data[Basket][lastname]">
</div>
<div class="error-message error-message-m">Le nom de famille est obligatoire</div>

Je dois déplacer le <div class="error-message-m> pour qu'il se trouve dans le premier div qui se trouve juste au-dessus de lui. Comme ceci:

Code HTML :

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

1
2
3
4
<div class="col-sm-8">
<input id="BasketLastname" class="form-control form-error" type="text" required="required" value="" maxlength="100" name="data[Basket][lastname]">
<div class="error-message error-message-m">Le nom de famille est obligatoire</div>
</div>

Donc j'ai regardé un peu la doc, et appendTo ou prepednTo, me permette de déplacer un élément. Le probleme c'est que je ne peux pas donner un ID. Je dois lui demander de se placer dans le premier div qui le précède.

J'ai donc essayé avec ceci

Code :

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

$('.error-message-m').appendTo("div:first");

Mais dans cette exemple, il va le mettre dans le tout premier div de la page, et ce n'est pas ce que je veux.
Je ne sais pas comment informer appendTo pour qu'il le place au bon endroit.

Je me suis aussi rappelé de prev

Code :

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

$('.error-message-m').prev().appendTo("div")

Mais sans succès aussi.

Pourriez-vous me mettre sur la piste?

Merci

[Spartacusply]

Je suis pas fan d'utiliser du jquery dans ces conditions là..

Tu peux montrer le code php qui te génères ton input html ? (avec le positionnement bootstrap en sus). Y a surement quelque chose à faire de ce côté là. Même au niveau du bootstrap.

Sinon, au final, pour ta première demande le code jquery aurait été :

Code :

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

1
2
 
$('form div.required').prev().prev().children('label:first').css(.....);

[SpaceFrog]

une autre approche :
http://jsfiddle.net/3jn3q/1/

[pierrot10]

Hello, je vous remercie pour votre aide. Je "ferme" ce sujet car j'ai trouvé ma problématique par CakePHP, et ce post n'a plus raison d'être. Merci