Connaitre le champ actif

Version imprimable

Bonjour à tous :)

Je voudrais vérifier si un champ est vide ou pas en JQuery. Ca j'arrive à le faire mais j'ai un souci sur un champ créé dynamiquement, ça ne marche pas.
Le principe : j'ai 2 champs input texte de réference de base. Lorsque je clique sur une image, je fais une copie de ma ligne <tr> et je l'insère juste en dessous.
Alors j'ai mis en test une alerte js. Les 2 premiers champs de référence fonctionne bien et j'ai bien l'alerte en clique dedans mais bizarrement pas ceux créé dynamiquement.
Alors voici le code cela parlera mieux :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<table id="crealstTblMots">
    <tr class="crealstReference">
        <td align="center">
            <input name="crealstmotorig" class="crealstmotnew" type="text" size="20" value=""  />
        </td>
        <td align="center">
            <input name="crealstmottrad" class="crealstmotnew" type="text" size="20" value=""  />
        </td>
        <td align="left">
            <img alt="removeline" src="img/remove.png" class="crealstremoveline" style="visibility: hidden" />
        </td>
    </tr>
    <tr id="endAddInput"></tr>
</table>

Et le JS qui gère la création d'une nouvelle ligne et qui marche parfaitement :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
$(function(){
        $("#crealstaddline").click(function(){
                var NewInput = $('table#crealstTblMots tr:eq(2)').clone();
                NewInput.insertBefore("tr#endAddInput").hide();
                NewInput.find("td").each(function(){
                        $(this).find("img").attr("style", "visibility: visible;");
                        $(this).find("input[type=text]").val("");
                        $(".crealstremoveline").click(function(){
                               varLine = $(this).parent("td").parent("tr");
                               varLine.remove();
                        });
                });
                NewInput.fadeIn(1000);
        });
        $("#crealsttheme").change(function(){
                if(this.value == "crealstthemeadd"){
                        $("#crealstnewtheme").fadeIn();
                }else{
                        $("#crealstnewtheme").fadeOut();
                }
        });
});

Mais voilà dans un autre js, je gère si le champ est vide et cela marche que pour ma ligne de référence :

Code:

1
2
3
4
5
6
7
8
9
10
 
...
$(".crealstmotnew").click(function(){
        //if($(this).val()==""){
        if($("input[name=crealstmotorig]").val()==''){
            alert('test');
            }
        //}
    });
...

Je voudrais juste afficher l'alerte test que ce soit n'importe quel champ.

Merci par avance si vous avez une idée :)

Stéphane

22/12/2009, 13h34
Tefonline

Hello :)
N'hésitez pas à me dire s'il manque des infos ou si je n'ai pas été clair sur un point particulier :)

Merci par avance

Stéphane
22/12/2009, 23h21
danielhagnoul

Bonsoir.

live(), Voir : http://www.developpez.net/forums/d83...s/#post4805186
23/12/2009, 12h01
Tefonline

Bonjour,
Merci Daniel :) Je vais voir cela ce soir et je reviendrais ici pour confirmer et je mettrais le code au cas où si ça peut aider qqu'un :)

P.S : C'est toi qui a écrit la préface du livre JQuery Référence (je suis plus sûr je demande de tête...) ? Ce bouquin est génial, content de l'avoir acheté :)

Stéphane

Hello !

Merci Daniel t'es un chef c'est exactement ça :)
Alors pour information, voici comment faire (si je peux aider qqu'un tant mieux !) :
But de la manoeuvre :
Ajouter des champs dynamiquement et détecter si un champ est vide. Pour l'exemple je ne fais pas de vérification si c'est rempli et je le mets au click (mais logiquement faudrait le mettre à l'évènement blur).

Code HTML :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<table id="crealstTblMots">
    <tr>
        <td align="center">Champ N°1</td>
        <td align="center">Champ N°2</td>
        <td align="left" id="tdImgAdd"><img alt="addline" src="img/add.png" id="crealstaddline" /></td>
    </tr>
    <tr class="crealstReference">
        <td align="center"><input name="crealstmotorig" class="crealstmotnew" type="text" size="20" value=""  /></td>
        <td align="center"><input name="crealstmottrad" class="crealstmotnew" type="text" size="20" value=""  /></td>
        <td align="left"><img alt="removeline" src="img/remove.png" class="crealstremoveline" style="visibility: hidden" /></td>
    </tr>
    <tr id="endAddInput"></tr>
</table>

Code JS pour l'ajout dynamique de champ :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
$(function(){
    $("#crealstaddline").click(function(){
        var NewInput = $('table#crealstTblMots tr:eq(2)').clone();
        NewInput.insertBefore("tr#endAddInput").hide();
        NewInput.css("background-color","");
        NewInput.find("td").each(function(){
            $(this).find("img").attr("style", "visibility: visible;");
            $(this).find("input[type=text]").val("");
            $(".crealstremoveline").click(function(){
                varLine = $(this).parent("td").parent("tr");
                varLine.remove();
            });
        });
        NewInput.fadeIn(1000);
    });
    $("#crealsttheme").change(function(){
        if(this.value == "crealstthemeadd"){
            $("#crealstnewtheme").fadeIn();
        }else{
            $("#crealstnewtheme").fadeOut();
        }
    });
});

Code JS pour la vérification des champs :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
$(function(){
    $(".crealstmotnew").live("click",function(){
        if($(this).val()==""){
            //La ligne complète :
            //$(this).parent("td").parent("tr").css("background-color","#E8575D");
            //Seulement le champs concerné :
            $(this).css("background-color","#E8575D");
            }
        //}
    });
});

Voilà !! J'espère que ça aidera. En tout cas, merci à toi Daniel :)

A+

Stéphane

23/12/2009, 13h50
Tefonline

Petite info qui a son importance......malheureusement.......... live() gère pas mal d'évènement sauf celui qu'il me faut : Blur.........

Arf je suis maudit moi... Je ruse donc (pas très propre...) avec un event mouseout.
23/12/2009, 22h48
danielhagnoul

Bonsoir.

Avec jQuery 1.4 alpha 1, live gère tous les événements. Mais c'est une version alpha avec de nombreux bugs, voir : http://www.developpez.net/forums/d84...ion-alpha-1-a/

Livre : non ce n'est pas moi. Je ne possède même aucun livre sur jQuery ou autre, trop cher pour mes moyens.
24/12/2009, 00h33
Tefonline

Oups autant pour moi c'est Didier Mouronval :oops:

Merci pour l'info mais effectivement, c'est trop dangereux d'utiliser un framework en beta sur un développement de site pour l'instant. Je ruse avec mon mouseout. C'est vrai que c'est pas l'idéal mais après différent test et après avoir mis les vérifications adéquates, c'est pas non plus moche :)

Bref merci pour ton aide !!

A+
Stéphane