Using an "is empty" function on an input using Jquery

Question

I am trying to do this: if $('#name') is empty() alert ("Enter valid input") I am guessing I do something like this?

if $('#name') == empty() { 
alert("enter valid input");
}

I want to use a function so I can get used to reusing the same function over and over. I realize I could just type it in individually without using the switch function. Articles like this: Check if inputs are empty using jQuery seem to not use the switch or function method.

function empty(e){
    switch (e) {
    case "":
    case 0:
    case "0":
    case null:
    case false:
    case typeof this == "undefined":
        return true
    default: return false 

    }
    }

</script>

 $(document).on('click','#add_btn',function (){
           if $('#name') 
         $.ajax({
                type:'POST',
                url:'add.php',
                //dataType: "json",
                data: {
                    "name": $('#name').val(),
                    "coffee": $('#coffee').val(),
                }, 
                success: function(data){ 
                    alert(data);
                    if (data=='ADD_OK') {
                      location.reload();
                    } else {
                         alert('something wrong');
                    }
                      }
                 })
            });
    </script>

`$(selector)` is going to return a jQuery object, which is not going to `==` or `===` anything other than itself. — Taplar, Dec 17 '18 at 16:46
Your code is similar to my next guess. It just "looked" funny to me because empty does not have the () afterwards... empty(). Thanks. — chess master1, Dec 17 '18 at 16:48
The `case typeof this == undefined` does not make sense. It's the value of `e` that's being examined. That case value will be either `true` or `false`. — Pointy, Dec 17 '18 at 16:50
@RoryMcCrossan val() can return undefined if the element is not found, no? — Taplar, Dec 17 '18 at 16:52
`jQuery('#tod').val()` in my console on the site returns undefined — Taplar, Dec 17 '18 at 16:53
@Taplar yeah, you're right. My mistake. Need to figure out when that changed, or if I'm going crazy — Rory McCrossan, Dec 17 '18 at 16:53
You could do, `[undefined, ''].indexOf($(selector).val())`. Or just `!` it — Taplar, Dec 17 '18 at 16:55
Yep. some think the switch should be === "undefined" . (three ===) Was a debate from a different article I read with mixed opinions. — chess master1, Dec 17 '18 at 16:58

score 0 · Accepted Answer · answered Dec 17 '18 at 17:04

Okay, let me help you to clean a little bit your mess.

First of all let's rewrite the empty function to better work and better look:

function empty(value) {
   return value === null || value === "" || value === undefined || (value.isArray ? value.length == 0 : false)
}

Now let's assume that you have two inputs and you want to check their values:

<input id="input1" type="text" />
<input id="input2" type="text" />

Now by using jQuery you select those inputs and send their values to the empty function:

var ids = ['input1' , 'input2'];
for (let id of ids) {
   if (empty($('#' + id).val())) {
      alert("The input: " + id + " is empty!");
   }
}

And that is pretty much all, a reusable function to check if a value is empty

ok thx for your time posted as answer. quick question, should it not return true? because if "" happened, empty should == true — chess master1, Dec 17 '18 at 17:15
It returns true in case the value is an empty string, a null value, undefined or in case the value is an array if the array is empty ( its length == 0 ) true is returned. — Osakr, Dec 17 '18 at 17:18

chess master1 · Answer 2 · 2018-12-17T17:42:52.680

Here is the full length solution thanks to those who posted:

function empty(value) {
   return value === null || value === "" || value === undefined || (value.isArray ? value.length == 0 : false)
}
</script>

<script type="text/javascript"> 

        $(document).on('click','#add_btn',function (){
            var ids = ['name'];
for (let id of ids) {
    if (empty($('#name').val())) {
    alert("Input: "  +id+ " is not a valid input");
  }
   if (!empty($('#name').val())) {
         $.ajax({
                type:'POST',
                url:'add.php',
                //dataType: "json",
                data: {
                    "name": $('#name').val(),
                    "coffee": $('#coffee').val(),
                }, 
                success: function(data){ 
                    alert(data);
                    if (data=='ADD_OK') {
                      location.reload();
                    } else {
                         alert('something wrong');
                    }
                      }
                 })
   } }
            });
    </script>

There is no really need for two ifs. The second if ( `if (!empty($('#name').val()))`) can be replaced with an else in the first if — Osakr, Jan 02 '19 at 10:15

score -1 · Answer 3 · answered Dec 17 '18 at 17:42

-1

if ($('#name').val() === undefined || $('#name').val().length == 0){ 
   alert("enter valid input");
}

Assuming that you input $('#name') is an html input. The first condition check if the input is here

answered Dec 17 '18 at 17:42

Murelh

3
4

Using an "is empty" function on an input using Jquery

3 Answers3