web-dev-qa-db-ja.com

入力テキスト値が空であるかどうかをJQUERYで確認し、アラートを要求する

入力フィールドの値が空の場合に送信ボタンをクリックすると、JQUERYでアラートを表示するにはどうすればよいですか？

<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
15
The Masta
$('#submit').click(function(){
   if($('#myMessage').val() == ''){
      alert('Input can not be left blank');
   }
});

更新

空白が必要ない場合は、 jQuery.trim（） を使用して削除することもできます

説明：文字列の先頭と末尾から空白を削除します。

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

より良いものはこちらです。

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

そして、空の文字列がとにかくfalseと評価されるので、読みやすくするために.lengthを必要としないか、> 0かどうかを確認する必要はありません。

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

常にテキストフィールド要素で動作することが確実な場合は、this.valueを使用できます。

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

また、$（ 'input：text'）は複数の要素を取得し、コンテキストを指定するか、単独の要素への参照が必要な場合にthisキーワードを使用することに注意してください（コンテキストの子孫/子にテキストフィールドが1つある場合）。

7
Zigri2612

また、エラー後に同じテキストに焦点を合わせたい場合は、これを試すことができます。

このエラーメッセージをパラグラフで表示したい場合、これを使用できます：

 $(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

トリムを使用して、入力からスペースを削除して空の入力を確認します（ユーザーがスペースを入力した場合）

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