检查输入值是否为空并显示警告。

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();">

- The Masta

---

我想参考一下这个链接：http://stackoverflow.com/questions/17971214/show-alert-using-jquery-impromptu-if-elements-value-is-empty-or-zero - Md. Parves Kawser

https://stackoverflow.com/a/49923650/7186739 - Billu

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

- Tushar Gupta - curioustushar

---

Trim是一个本地JS字符串函数：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim。因此，`$('#myMessage').val().trim()`可能更有意义。但仅适用于IE 9+。 - DanielST

@slicedtoad 是的，我知道，但是IE 9+。 - Tushar Gupta - curioustushar

在弹出警告消息后，你漏写了 return false;。没有这个，关闭警告后表单会被提交。 - proofzy

Answer 2

更好的在这里。

$('#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关键字（如果您只需要引用一个单独的元素），前提是上下文的后代/子项中有一个文本字段。

- Zigri2612

Answer 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;
        }
    });
 });

- Shiv Yadav

---

如果你修剪 $('#selBooks').val() 的话可能会更好，否则在带有空格的字符串的情况下它不会报错。 - sujit tiwari

Answer 4

使用 trim 函数检查空输入并删除输入中的空格（如果用户输入了空格）

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

- Billu

Answer 5

请使用这个方法，因为只检查值是否不等于空字符串是无法解决存在多个空格的情况的。

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

}

- Chinmay Hegde

Answer 6

你可以创建一个函数，检查像下面这样的输入类中的每个输入。

 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'中的每个输入，如果为空，则弹出警告并着色输入框的边框，以便用户识别未填写的输入。

- Cheruiyot A Kirui