CODEWITHSUNDEEP
javascriptjqueryvalidation
user443346
user443346

Reputation:

Check array length javascript

This is the first time I've tried to do data validation with Javascript and jQuery.

My array with errors is getting filled fine, but my problem is checking if this array is empty. In my situation it's always true. It will always alert me "errors leeg", even if the array is empty, checked with console.log(error):

<script type="text/javascript">
$(document).ready(function () 
{
    var error = [];
    $('#contactformulier').submit(function() {

      if($('input#namet').val().length == 0) {
          error['naam'] = 'Geen geldige naam ingevuld';
      } else{
          delete error['naam'];
      }

      if($('input#mailt').val().length == 0){
          error['mail'] = 'Geen geldig e-mailadres ingevuld';
      } else{
          delete error['mail'];
      }

      if($('textarea#message').val().length == 0){
          error['bericht'] = 'Geen geldig bericht ingevuld';
      } else{
          delete error['bericht'];
      }

      console.log(error);
      if (error.length < 1) {
        alert('errors leeg');
      }

      return false;
    });
});
</script>

Any suggestions?

Upvotes: 0

Views: 9585

Answers (5)

Alnitak
Alnitak

Reputation: 339846

As others have said, you can't take the length of an Object being used as an associative array, the .length property is for real arrays.

What you can do though, is ask how many keys there are:

var n = Object.keys(error).length;

Upvotes: 0

Plap
Plap

Reputation: 1056

<script type="text/javascript">
$(document).ready(function () 
{
    var error;
    var inError;
    $('#contactformulier').submit(function() {

      error = {};
      inError = false;

      if($('input#namet').val().length == 0) {
          error['naam'] = 'Geen geldige naam ingevuld';
          inError = true;
      }

      if($('input#mailt').val().length == 0){
          error['mail'] = 'Geen geldig e-mailadres ingevuld';
          inError = true;
      }

      if($('textarea#message').val().length == 0){
          error['bericht'] = 'Geen geldig bericht ingevuld';
          inError = true;
      }

      console.log(error);
      if (inError) {
        alert('errors leeg');
      }

      return false;
    });
});
</script>

Upvotes: 0

VisioN
VisioN

Reputation: 145408

The problem is that you mix up JavaScript types. What you think is an associative array, in JavaScript is an object with properties and methods.

So you need to define it with:

var error = {};

If a simple array emptiness can be checked with arr.length > 0, object "emptiness" (i.e. absence of properties/methods) can be checked with jQuery method $.isEmptyObject():

if ( $.isEmptyObject(error) ) { ... }

REF: https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Working_with_Objects

Upvotes: 0

Bart
Bart

Reputation: 27205

You can only use numeric indices for arrays - at least if you want to use array functionality such as Array#length.

i.e. 

var error = [];
error.push({ naam: "geen geldige naam" });
error.push({ mail: "geen geldige email" });
error.length == 2

Upvotes: 5

Ja͢ck
Ja͢ck

Reputation: 173582

That's because you're adding properties to your array instead of indexed items.

You can add items to an array using push():

error.push('Geen geldig bericht ingevuld');

And before you start validating, you clear the array:

error.length = 0;
// start validation logic

Upvotes: 1

Related Questions