CODEWITHSUNDEEP
javascriptjquery
AloneInTheDark
AloneInTheDark

Reputation: 938

Checking elements in array if empty in jQuery

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

Upvotes: 2

Views: 14690

Answers (7)

Deepak Ingole
Deepak Ingole

Reputation: 15742

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

Upvotes: 3

letiagoalves
letiagoalves

Reputation: 11302

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

Upvotes: 2

epascarello
epascarello

Reputation: 207501

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.

Upvotes: 0

Dave Haigh
Dave Haigh

Reputation: 4547

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

Upvotes: 0

David
David

Reputation: 444

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

Upvotes: 2

A. Wolff
A. Wolff

Reputation: 74420

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

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324620

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

Upvotes: 0

Related Questions