检查数组长度的JavaScript

Question

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?

Answer 1

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

ie

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

Answer 2

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

Answer 3

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" (ie 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

Answer 4

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;

Answer 5

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