Check if input value is empty and display an alert

Question

How is it possible to display an alert with jQuery if I click the submit button and the value of the input field is empty?

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

I would like to refer http://stackoverflow.com/questions/17971214/show-alert-using-jquery-impromptu-if-elements-value-is-empty-or-zero — Md. Parves Kawser, Sep 16 '13 at 09:19

Tushar Gupta - curioustushar · Accepted Answer · 2014-09-04T14:23:01.950

83

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

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

edited Sep 04 '14 at 14:23

answered Sep 16 '13 at 09:15

Tushar Gupta - curioustushar

58,085
24
103
107

1

Trim is a native JS string function: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim. So `$('#myMessage').val().trim()` might make more sense. IE 9+ only though. – DanielST Oct 24 '14 at 13:47
@slicedtoad yeah i know but IE 9+. – Tushar Gupta - curioustushar Oct 24 '14 at 16:33
5

Well you are missing `return false;` after alert message. Without that, form is submited after closing alert. – proofzy Jun 19 '17 at 15:09

score 13 · Answer 2 · answered May 17 '16 at 06:29

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:

$('#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.

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

score 3 · Answer 3 · edited Dec 13 '17 at 06:10

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

edited Dec 13 '17 at 06:10

sujit tiwari

274
3
14

answered Dec 13 '17 at 05:44

Shiv Yadav

161
12

1

Possibly it will be good if you trim $('#selBooks').val() otherwise it won't give error in case of sting with white space – sujit tiwari Dec 13 '17 at 06:10

score 0 · Answer 4 · answered Apr 19 '18 at 14:27

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

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

score 0 · Answer 5 · answered Jan 12 '21 at 08:40

You could create a function that checks every input in an input class like below

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

What this does is it checks every input in 'myclass' and if empty it gives alert and colour the border of the input and user will recognize which input is not filled.

score 0 · Answer 6 · answered Jun 20 '21 at 20:02

Use this instead because just trying to check if the value is not equal to an empty string won't help if there are multiple spaces.

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

}

Check if input value is empty and display an alert

6 Answers6

Linked