.prev() et .next()

iluzzion
Javascript

Bonjour a tous,

Je bosse actuellement sur la vérification d'un formulaire en JQuery.

Voila un bout de code qui va servir d'exemple pour vous expliquer mon problème :

<fieldset>
                        <label for = "Numero_Fuite"><?php echo _('Leak Number'); ?> : </label><img class="field_success" /><span class="field_error"></span>
                        <input type = "text" name = "Numero_Fuite" id = "Numero_Fuite"/>
                    </fieldset>
                    <fieldset>
                        <label for = "NomSite"><?php echo _('Block / Field'); ?> : </label><img class="field_success2" /><span class="field_error"></span>
                        <input type = "text" name = "NomSite" id = "NomSite"/>
                    </fieldset>

Donc sur chaque champ j'ai un span ayant pour classe field_error, cette classe contient une image croix rouge.

En JQuery je test si mes champs sont vides et si ils sont vide j'affiche la croix en utilisant .prev() car je me sert de la même classe pour tous les champs. 

if($('#Numero_Fuite').val()=='')
                    {
                        valid = false;

                        $('#Numero_Fuite').prev('.field_error').fadeIn();

                    }
                    /*
                     * Sinon on cache la croix
                     */
                    else
                    {                         
                        $('#Numero_Fuite').prev('.field_error').fadeOut();

                    }       
                    if($('#NomSite').val()=='')
                    {
                        valid = false;

                        $('#NomSite').prev('.field_error').fadeIn();

                    }

                    else
                    {    

                        $('#NomSite').prev('.field_error').fadeOut();

                    }

Mon problème c'est que pour afficher la croix ça marche très bien, mais j'essaie d'afficher une image valider en testant cette fois si sur le keyUp et la impossible. 

$('#Numero_Fuite').keyup(function(){                             
                    var Numero_Fuite = $('#Numero_Fuite').val();

                    if($('#Numero_Fuite').val()=='')
                    {
                        $('#Numero_Fuite .field_success').hide();
                        $('#Numero_Fuite').prev('.field_error').fadeIn();                

                    }
                    else
                    {
                        $('#Numero_Fuite').prev('.field_error').hide();                
                        $('#Numero_Fuite .field_success').fadeIn();
                    }

                });

                $('#NomSite').keyup(function(){                             
                    var NomSite = $('#NomSite').val();

                    if($('#NomSite').val()=='')
                    {
                        $('#NomSite .field_success').hide();
                        $('#NomSite').prev('.field_error').fadeIn();                

                    }
                    else
                    {
                        $('#NomSite').prev('.field_error').hide();                
                      $('#NomSite .field_success').fadeIn();
                    }

                });

L'affichage de la croix sur le keyUP marche aussi, mais pas le valider, et j'arrive pas a trouver de solutions.

Alors si quelqu'un vois d’où ça viens, merci d'avance :)

1 réponse

zvetlania

Salut, tu as essayé un truc de ce style ?
En imaginant que par défaut en css, tu as les .field_success en display none

// Si la valeur est vide
if($('#Numero_Fuite').val()=='')
                   {
                        // variable en false
                       valid = false;
                        // Je cache l'image 'success'
                       $('#Numero_Fuite').prev('.field_success').fadeOut();
                        // Je montre l'image 'error'
                       $('#Numero_Fuite').prev('.field_error').fadeIn();

                   }
// Si ma valeur n'est pas vide
                   else
                   {              
                       // Je cache l'image 'error'
                       $('#Numero_Fuite').prev('.field_error').fadeOut();
                       // Je montre l'image 'success'
                        $('#Numero_Fuite').prev('.field_success').fadeIn();
                   }

ça pourrait même marcher comme ça je pense... 

if($('#Numero_Fuite').val()=='')
                   {
                       valid = false;
                       $('#Numero_Fuite').prev('img').fadeOut();
                       $('#Numero_Fuite').prev('span').fadeIn();

                   }
                   /*
                    * Sinon on cache la croix
                    */
                   else
                   {                        
                       $('#Numero_Fuite').prev('span').fadeOut();
                         $('#Numero_Fuite').prev('img').fadeIn();
                   }