Errors shown sequenced only 1 by 1 (not shown together)

So when i make all fields to be required, e.g:

• email
• password
• fullname

I tested them by sending empty fields (all of them). But the getErrors only gives first error. If everything empty, the error is on email. If email is not empty, then the error is on password, and so on.

It's OK. But i wonder, the demo shows all errors (not only 1 by 1). Trying to look into the page source, and i can't find what makes the demo detects all the error.

[rickharrison]

The first argument in the callback will be an array of all the errors. Please post some example code or read the docs at http://rickharrison.github.io/validate.js/

:D Of Course i've read the doc also the page source of the demo page.
The first argument in the callback will be an array of all the errors <~~ i mean, the array of errors only give me the first error although everything required is empty.

/**
 * Registration
 */
var Register = (function () {
  var formName = 'register-form';
  var form    = document.querySelector('[name="' + formName + '"]');
  var $form   = $(form);
  var button  = form.querySelector('button');
  var notif   = form.querySelector('.notif');
  var loading = form.querySelector('.loading');

  var rules = [
    {
      name  : 'User_ID',
      rules : 'required',
      display : 'User ID'
    },
    {
      name  : 'Pass',
      rules : 'required|min_length[6]',
      display : 'Password'
    },
    {
      name  : 'Nama',
      rules : 'required',
      display : 'Nama Lengkap'
    },
    {
      name  : 'Nomor_HP',
      rules : 'required',
      display : 'Nomor HP'
    },
    {
      name  : 'Tanggal_Lahir',
      rules : 'required',
      display : 'Tanggal Lahir'
    },
    {
      name  : 'syarat',
      rules : 'required',
      display : 'Syarat & Ketentuan'
    }
  ];



  var _startProcess = function () {
    button.classList.add('none');
    loading.classList.remove('none');
  }



  var _stopProcess = function () {
    button.classList.remove('none');
    loading.classList.add('none');
  }



  var _showNotif = function () {
    notif.classList.remove('none');
  };



  var _hideNotif = function () {
    notif.classList.add('none');
  };



  var _makeRequest = function () {
    _startProcess();

    var serialized = $form.serializeArray();
    var data  = {};

    serialized.forEach(function (val, idx, arr) {
      data[val.name] = val.value;
    });

    $.ajax({
      url       : '',
      type      : 'post',
      dataType  : 'json',
      data      : data
    }).done(function (response) {
      var error = _handler(response);

      if (error) {
        _showNotif();
      } else {
        _hideNotif();
      }

      _stopProcess();
    }).fail(function (jqXHR, textStatus) {
      alert(textStatus);
      _hideNotif();
      _stopProcess();
    });
  };



  var _handler = function (errors) {
    var error = false;
    var total = errors.length;
    var i     = 0;
    var html  = '';

    if (total > 0) {
      for (; i < total; ++i) {
        html += errors[i].message + '<br>';
      }

      error = true;
      notif.innerHTML = html;
      notif.classList.remove('success');
      notif.classList.add('error');
    }

    return error;
  };



  var _callback = function (errors, ev) {
    var error = _handler(errors);

    if (error) {
      _showNotif();
    } else {
      ev.preventDefault();
      _makeRequest();
    }
  };



  var setup = function () {
    new FormValidator(formName, rules, _callback);
  };


  return {
    setup: setup
  };
})();



Register.setup();

[jchudzynski]

I have the same problem. Array of errors returns only the first element.

[anushac243]

I have the same issue. It works correctly in one form where it shows all the errors at once but it doesn't work in another one. The code is literally the same except there are 'depends' conditions on the form where all errors aren't being caught at once. Maybe that has something to do with it?

Is there a fix to this?

[rickharrison]

Everything is working on the demo page, so I would start by looking at that code and seeing how yours differs. If there is a bug, a pull request with a fix would be much appreciated.

[anushac243]

Here is my validation code. Please let me know if I should correct anything. Otherwise, I'll be happy to create a pull request.

var tender_val = new FormValidator('hr-form', [{
name: 'hr-con-name',
display: 'Contact Name',
rules: 'required|alpha'
}, {
name: 'hr-con-num',
display: 'Mobile Number',
rules: 'required|numeric|exact_length[10]'
}, {
name: 'hr-con-email',
display: 'Email ID',
rules: 'required|valid_email'
}, {
name: 'hr-sdate-in',
display: 'Start Date',
rules: 'required'
}, {
name: 'hr-sel-proj-type',
display: 'Project Type',
rules: 'required'
}, {
name: 'hr-sel-work',
display: 'Scope of Work',
rules: 'required'
}, {
name: 'hr-firm-name',
display: 'Firm Name',
rules: 'alpha'
}, {
name: 'plot-area',
display: 'Plot Area',
depends: function(){
return (($("#t-proj-type").val()==="res") &amp;&amp; ($.inArray('arch',$('#t-req-hr').val()) > -1));
},
rules: 'required|numeric'
}, {
name: 'builtup-area',
display: 'Built-up Area',
depends: function(){
return (($("#t-proj-type").val()==="res") &amp;&amp; ($.inArray('arch',$('#t-req-hr').val()) > -1));
},
rules: 'required|numeric'
}], function(errors, event) {

        if (errors.length > 0 ) {
            var errorString = '<ul>';

            for (var i = 0, errorLength = errors.length; i < errorLength; i++) 
                        errorString += '<li>'+errors[i].message + ' </li>';

            errorString = errorString+'</ul>';

            $('p#t-form-errors').html(errorString);
            $('p#t-form-errors').css('display','block');
        }
    });

[gulfcoastdev]

Here is fragment of my code - it always stops on the first element that didn't pass validation and return an array with only this element not all of them.

<script type="text/javascript">

var validator = new FormValidator('form', 
[
{
    name: 'last',
    display: "Last Name",
    rules: 'required'
},{
    name: 'first',
    display: "First Name",
    rules: 'required'
}
], function(errors) {
    if (errors.length > 0) {
        // Show the errors
        console.log(errors.length + " errors");
try {
        var errorString = '';
        //var names = [];
        for (var i = 0, errorLength = errors.length; i < errorLength; i++) {
            errorString += errors[i].message + '<br />';
            ///names[i] = errors[i].name;
                 //highlightElement(errors[i].name);
        }

        console.log("Error: "+ errorString);

    }catch (err){
        console.log(err);
    }

      //  el.innerHTML = errorString;
    }
});

function highlightElement(strName){
    var element = document.getElementsByName(strName)[0]
    if( element){
         element.style.backgroundColor = 'Yellow';
    }
}

[gulfcoastdev]

I am using validate.js 2.0.1

[beijaflor]

@izotx @anushac243
You must set ID for <input> tag to identify its uniqueness.
Check this first.

In my case, all <input type="text"> worked fine but checkbox didn't work after adding id attribute.
See my pull request #183 to make it work.