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

Question

如果单击"提交"按钮,输入字段的值为空,如何使用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();">

Answer 1

$('#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');
   }
});

Answer 2

更好的是在这里.

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

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

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

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

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

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