JQUERY检查INPUT文本值是否为空并提示警报

How is it possible to display an Alert with JQUERY if i click the submit button an the value of the imput field is empty?

如果单击提交按钮，输入字段的值为空，如何显示带有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();">

4 个解决方案

#1

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

Update

更新

If you don't want whitespace also u can remove them using jQuery.trim()

如果你不想要空格，你可以使用jQuery.trim（）删除它们

Description: Remove the whitespace from the beginning and end of a string.

描述：从字符串的开头和结尾删除空格。

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

#2

Better one is here.

更好的是在这里。

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

And you don't necessarily need .length or see if its >0 since an empty string evaluates to false anyway but if you'd like to for readability purposes:

并且您不一定需要.length或查看它是否> 0，因为无论如何空字符串的计算结果为false，但是如果您想要出于可读性的目的：

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

If you're sure it will always operate on a textfield element then you can just use this.value.

如果您确定它将始终在textfield元素上运行，那么您可以使用this.value。

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

Also you should take note that $('input:text') grabs multiple elements, specify a context or use the this keyword if you just want a reference to a lone element ( provided theres one textfield in the context's descendants/children ).

此外，您应该注意$（'input：text'）抓取多个元素，指定上下文或使用this关键字，如果您只想引用一个单独的元素（前提是在上下文的后代/子元素中有一个文本字段）。

#3

Also you can try this, if you want to focus on same text after error.

如果您想在错误后关注相同的文本，也可以尝试这样做。

If you wants to show this error message in a paragraph then you can use this one:

如果要在段落中显示此错误消息，则可以使用以下内容：

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

#4

Check empty input with removing space(if user enter space) from input using trim

使用trim从输入中删除空格（如果用户输入空格），检查空输入

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

#1

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