21

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

6 回答 6

83
$('#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');
   }
});
于 2013-09-16T09:15:40.080 回答
12

更好的在这里。

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

而且您不一定需要 .length 或查看它是否 >0,因为空字符串无论如何都会评估为 false,但如果您想出于可读性目的:

$('#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 关键字,如果你只想引用一个单独的元素(假设在上下文的后代/子元素中有一个文本字段)。

于 2016-05-17T06:29:53.180 回答
3

如果您想在出错后专注于相同的文本,您也可以试试这个。

如果您想在段落中显示此错误消息,那么您可以使用这个:

 $(document).ready(function () {
    $("#submit").click(function () {
        if($('#selBooks').val() === '') {
            $("#Paragraph_id").text("Please select a book and then proceed.").show();
            $('#selBooks').focus();
            return false;
        }
    });
 });
于 2017-12-13T05:44:39.743 回答
0

使用修剪从输入中删除空格(如果用户输入空格)检查空输入

$(document).ready(function(){     
       $('#button').click(function(){
            if($.trim($('#fname').val()) == '')
           {
               $('#fname').css("border-color", "red");
               alert("Empty"); 
           }
     });
});
于 2018-04-19T14:27:06.767 回答
0

您可以创建一个函数来检查输入类中的每个输入,如下所示

 function validateForm() {
  
    var anyFieldIsEmpty = jQuery(".myclass").filter(function () {
        return $.trim(this.value).length === 0;
    }).length > 0

    if (anyFieldIsEmpty) {
        alert("Fill all the necessary fields");
        var empty = $(".myclass").filter(function () {
            return $.trim(this.value).length === 0;
        })
        empty.css("border", "1px solid red");
        return false;
    } else {
        return true;
    }
}

它的作用是检查“myclass”中的每个输入,如果为空,它会发出警报并为输入的边框着色,用户将识别出哪个输入未填充。

于 2021-01-12T08:40:31.947 回答
0

请改用它,因为如果有多个空格,仅尝试检查该值是否不等于空字符串将无济于事。

('#submit').onclick = function(){
    let count = 0;
    let notEmpty = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890";
        
    for(let i=0; i < $('#myMessage').value.length; i ++){

        for(let j = 0; j < notEmpty.length ; j++){
    
                    if($('#myMessage').value[i]== notEmpty[j]){
                            count += 1;
                    }
            }
    }

    if(count==0){
    
        alert("You cannot leave this blank");
    }

}
于 2021-06-20T20:02:27.830 回答