2013-07-23 2 views
2

Je veux vérifier si une zone de texte contient un nom ou non. Si ce n'est pas le cas, une alerte devrait s'afficher affichant un message après avoir appuyé sur un bouton de soumission et la page ne devrait pas soumettre la valeur vide. S'il contient une valeur, la valeur doit être soumise. J'utilise le code ci-dessous. Lorsque je laisse la zone de texte vide et que vous cliquez sur le bouton Envoyer, l'alerte s'affiche comme prévu, mais elle envoie également la valeur vide après avoir ignoré l'alerte.Comment vérifier si une zone de texte est vide ou non?

<html> 
    <head> 
     <script type="text/javascript"> 

      function check() 
      { 
       if (!frm1.FileName.value) 
       { 
        alert ("Please Enter a File Name"); 
        return (false); 
       } 
       return (true); 
      } 

     </script> 
    </head> 
    <body> 
     <form name="frm1" id="frm1" action="/cgi-bin/page.pl" method="POST"> 
      <input type="text" name="FileName" id="FileName">  
      <input type="submit" value="send" name="btn_move" id="btn_move" onclick="check()"> 
     </form> 
    </body> 
</html> 

Quel est le problème dans le code?

+1

duplication possible de [Vérifier si une zone de texte est vide en Javascript] (http://stackoverflow.com/questions/14659098/checking-if-a-textbox-is-empty-in-javascript) –

Répondre

7

Vous devez faire onclick="return check();"

+0

d'ailleurs. .. J'ai mis en place cette pensée qui est tout ce qui est nécessaire sans regarder la question. Bien sûr, ça ne marche pas. J'ai besoin de définir ce que 'check' est le premier – Dennis

4

Essayez cette

<html> 
    <head> 
     <script type="text/javascript"> 

      function check() 
      { 
       if (document.getElementById('FileName').value=="" 
       || document.getElementById('FileName').value==undefined) 
       { 
        alert ("Please Enter a File Name"); 
        return false; 
       } 
       return true; 
      } 

     </script> 
    </head> 
    <body> 
     <form name="frm1" id="frm1" action="/cgi-bin/page.pl" method="POST"> 
      <input type="text" name="FileName" id="FileName">  
      <input type="submit" value="send" name="btn_move" id="btn_move" onclick="return check();"> 
     </form> 
    </body> 
</html> 
+0

Quelle est la différence? –

+0

Pas besoin de retourner (false) bracket. – Amit

+0

Mais ce ne serait pas la raison de la question. –

1

Vous revenez false de la check, mais vous n'êtes pas retourner la valeur du gestionnaire d'événements .

uniquement si le gestionnaire d'événements retourne false, l'action par défaut (en soumettant le formulaire dans ce cas) est empêché:

onclick="return check();" 

Jetez un oeil à la grande introduction to event handlers at quirksmode.org pour apprendre les notions de base sur la gestion des événements (et apprendre de meilleures façons que les gestionnaires d'événements en ligne).


En général, il est préférable d'effectuer ces vérifications non pas lorsque le bouton Soumettre est appuyé mais juste avant que le formulaire ne soit soumis. Ainsi, au lieu de lier le gestionnaire à l'événement cliquez sur le bouton, le lier à la soumettre événement de la forme, par exemple (gestionnaires d'événements traditionnels):

document.getElementById('frm1').onsubmit = function() { 
    if (!this.FileName.value) { 
     alert ("Please Enter a File Name"); 
     return false; 
    } 
}; 

L'avantage est que le la vérification sera effectuée pour toutes les soumissions de formulaire, et pas seulement lorsque le bouton de soumission est cliqué (par exemple si le bouton de soumission est «exécuté» en appuyant sur la touche Entrée).

Questions connexes