Discussion :

[Tefonline]

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 :

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

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 :

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

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 :

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

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

[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

[danielhagnoul]

Bonsoir.

live(), Voir : http://www.developpez.net/forums/d83...s/#post4805186

[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

[Tefonline]

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 :

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

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 :

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

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 :

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

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

[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.