The custom view list errors object

customListErrors: {
  add: function(field, message, container){
    // your logic here
  },
  remove: function(container){
    // your logic here
  }
}

Method add()

When occur an error, the add method will be called, overriding the default method. This method will receive 3 parameters: the field, the message and the container.

Method remove()

When the container clear the errors the method remove will be called, overriding the default method. This method receive a parameter: the container.

If you want access all selectors you can use: this.config.selectors object.

Usage example

The javascript:

var config = {
  customListErrors: {
    add: function(field, message, container){
      var wrap = container.querySelector('.' + this.config.selectors.wrapErrors);
      if(wrap){
        var node = document.createElement("P");
        var textnode = document.createTextNode(message);
        node.appendChild(textnode);
        wrap.appendChild(node);
      }
    },
    remove: function(container){
      var wrap = container.querySelector('.' + this.config.selectors.wrapErrors);
      if(wrap){
        wrap.innerHTML = '';
      }
    }
  }
};
var validator = new VanillaValidator(config);

The functionality above will overriding the default view list errors methods.

The html

<div class="wrap-errors"></div>

In your html you must have a container with a class how defined in selectors.wrapErrors