web-dev-qa-db-fra.com

JQUERY vérifie si INPUT text Value est vide et affiche une alerte

Comment est-il possible d'afficher une alerte avec JQUERY si je clique sur le bouton d'envoi et que la valeur du champ d'imput est vide?

<input type="text" id="myMessage" name="shoutbox_msg" size="16" class="field_nosize" maxlength="150">&nbsp;
<input id="submit" type="submit" name="submit_post" class="button_nosize" value="Senden" onclick="sendMessage(); clearInput();">
javascriptjqueryformsvalidationsubmit
14
The Masta
$('#submit').click(function(){
   if($('#myMessage').val() == ''){
      alert('Input can not be left blank');
   }
});

Mettre à jour

Si vous ne voulez pas d’espace, vous pouvez aussi les supprimer en utilisant jQuery.trim ()

Description: Supprime les espaces au début et à la fin d’une chaîne.

$('#submit').click(function(){
   if($.trim($('#myMessage').val()) == ''){
      alert('Input can not be left blank');
   }
});
68
Tushar Gupta

Le meilleur est ici.

$('#submit').click(function()
{
    if( !$('#myMessage').val() ) {
       alert('warning');
    }
});

Et vous n'avez pas nécessairement besoin de .length ou de voir si sa valeur est> 0 car une chaîne vide est évaluée à false de toute façon, mais si vous le souhaitez pour des raisons de lisibilité:

$('#submit').on('click',function()
{
    if( $('#myMessage').val().length === 0 ) {
        alert('warning');
    }
});

Si vous êtes sûr qu'il fonctionnera toujours sur un élément textfield, vous pouvez simplement utiliser this.value.

$('#submit').click(function()
{
      if( !document.getElementById('myMessage').value ) {
          alert('warning');
      }
});

Notez également que $ ('input: text') saisit plusieurs éléments, spécifiez un contexte ou utilisez le mot clé this si vous souhaitez simplement faire référence à un élément isolé (à condition qu'un champ de texte ne soit contenu dans les descendants/enfants du contexte).

6
Zigri2612

Vous pouvez aussi essayer ceci si vous voulez vous concentrer sur le même texte après une erreur.

Si vous souhaitez afficher ce message d'erreur dans un paragraphe, vous pouvez utiliser celui-ci:

 $(document).ready(function () {
    $("#submit").click(function () {
        if($('#selBooks').val() === '') {
            $("#Paragraph_id").text("Please select a book and then proceed.").show();
            $('#selBooks').focus();
            return false;
        }
    });
 });
2
Shiv Yadav

Vérifiez l'entrée vide en supprimant l'espace (si l'utilisateur entre l'espace) de l'entrée en utilisant trim 

$(document).ready(function(){     
       $('#button').click(function(){
            if($.trim($('#fname').val()) == '')
           {
               $('#fname').css("border-color", "red");
               alert("Empty"); 
           }
     });
});
0
Super Model