Checking elements in array if empty in jQuery

Question

i have an array of input fields which will contain some information. I should check them if one of them are empty.

jQuery Code:

   $("#NewUserBtn").click(function () {

            var zorunluAlan = ["#YeniAd", "#YeniSoyad", "#YeniEposta", "#YeniEpostaOnay", "#YeniSifre", "#YeniSifreOnay"];

            for (i = 0; i < zorunluAlan.length; i++) {
                if (//What should i write here?) {
                    alert("Please fill all input fields!");
                    break;
                }
            }
    });

are you considering an input filled with only space(s) as empty? — A. Wolff
– A. Wolff, Commented Sep 11, 2013 at 14:40

Deepak Ingole · Accepted Answer · 2013-09-11 15:16:53Z

3

Use,

$("#NewUserBtn").click(function () {

            var zorunluAlan = ["#YeniAd", "#YeniSoyad", "#YeniEposta", "#YeniEpostaOnay", "#YeniSifre", "#YeniSifreOnay"];

            for (i = 0; i < zorunluAlan.length; i++) {
                if ($(zorunluAlan[i]).val().trim().length == 0) {
                    alert("Please fill all input fields!");
                    return false;
                }
            }
    });

edited Sep 11, 2013 at 15:16

answered Sep 11, 2013 at 14:37

Deepak Ingole

15.9k10 gold badges49 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

David · Accepted Answer · 2013-09-11 14:38:28Z

2

Assuming you're using jQuery, you need to put !$(zorunluAlan[i]).val() as your condition.

answered Sep 11, 2013 at 14:38

David

4443 silver badges10 bronze badges

Comments

letiagoalves · Accepted Answer · 2013-09-11 14:42:25Z

2

You can do it in a cleaner way using jQuery filter function:

var zorunluAlan = ["#YeniAd", "#YeniSoyad", "#YeniEposta", "#YeniEpostaOnay", "#YeniSifre", "#YeniSifreOnay"];

var $empty = $(zorunluAlan.join(",")).filter(function() {
    return ($(this).val().length === 0);
});

if($empty.length > 0) {
   alert("Please fill all input fields!");
}

answered Sep 11, 2013 at 14:42

letiagoalves

11.3k4 gold badges42 silver badges68 bronze badges

11 Comments

Niet the Dark Absol Over a year ago

filter is a loop :p

Niet the Dark Absol Over a year ago

Eh, not really. Because in your code there's no way to stop the loop when an empty input is found, that's a loss of efficiency.

letiagoalves Over a year ago

@Kolink yap, cleaner... not faster. But I bet in the end he will not break the loop so he can show a error message for each input ;)

Niet the Dark Absol Over a year ago

Well, it's people like you that are the reason why the internet is so slow. But on the other hand I guess I should be thanking you because you all make my site seem infinitely faster by comparison.

letiagoalves Over a year ago

@Kolink i'm used to people with those kind of "points". Because of <1ms of performance loss you can say with certainty that "it's people like me that are the reason why the internet is so slow". I'm glad strangers know me so well.

|

Niet the Dark Absol · Accepted Answer · 2013-09-11 14:37:15Z

It's really easy, even in Vanilla JS

document.getElementById('NewUserBtn').onclick = function() {
    var zorunluAlan = ["YeniAd","YeniSoyad","........"],
        l = zorunluAlan.length, i;
    for( i=0; i<l; i++) {
        if( !document.getElementById(zorunluAlan[i]).value) {
            alert("Please fill all input fields! ["+zorunluAlan[i]+" is empty]");
            return false;
        }
    }
    return true;
}

Then again, it's even easier in HTML:

<input type="text" name="YeniAd" REQUIRED />

The attribute doesn't have to be in uppercase, I just made it so to make it more obivous ;)

A. Wolff · Accepted Answer · 2013-09-11 14:37:40Z

0

   $("#NewUserBtn").click(function () {

       var zorunluAlan = ["#YeniAd", "#YeniSoyad", "#YeniEposta", "#YeniEpostaOnay", "#YeniSifre", "#YeniSifreOnay"];

       for (i = 0; i < zorunluAlan.length; i++) {
           if (!$.trim($(zorunluAlan[i]).val()).length) {
           alert("Please fill all input fields!");
           break;
           }
       }
   });

answered Sep 11, 2013 at 14:37

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

Comments

Dave Haigh · Accepted Answer · 2013-09-11 14:41:40Z

0

An alternative method using each

var zorunluAlan = $("#YeniAd, #YeniSoyad, #YeniEposta, #YeniEpostaOnay, #YeniSifre, #YeniSifreOnay"),
        invalid = false;
    if(zorunluAlan.length) {
      zorunluAlan.each(function() {
        var thisValue = $(this).val();
        if(thisValue == "" || !thisValue){
          invalid = true;
        }    
      });
    }
    if(invalid){
      alert("Please fill all input fields!");
    }

answered Sep 11, 2013 at 14:41

Dave Haigh

4,5675 gold badges38 silver badges56 bronze badges

Comments

epascarello · Accepted Answer · 2013-09-11 14:42:19Z

0

Basic idea using jQuery to add an error class

$("#a,#b,#c")
    .removeClass("error")
    .filter( 
        function(){
            return !this.value.length;
        }
    )
   .addClass("error");

http://jsfiddle.net/m3WA8/

It could be simplified by using a class/attribute instead of the string of ids.

answered Sep 11, 2013 at 14:42

epascarello

208k20 gold badges206 silver badges246 bronze badges

Collectives™ on Stack Overflow

Checking elements in array if empty in jQuery

7 Answers 7

Comments

Comments

11 Comments

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

11 Comments

Comments

Comments

Comments

Comments

Related