The custom validation object

customValidates: { // will react to the selector 'customValidate'
  'your-key': { // must inform this key in html attribute 'data-validate-key'
    message: 'your message', // can pass by the html attribute 'data-message-error'
    fn: function(field, container){
      // your logic (must return true or false)
      return true;
    }
  }
}

Note you must have a message and a fn keys into your custom validate object. In message you configure your custom message error (you can do that using the html attribute data-message-error). In fn key you set your funciton that will validate your field. That function will receive the field and the container as parameters. You must return true or false, where true means succesful.

A simple example:

The javascript:

var config = {
  customValidates: {
    'block-word-java': {
      message: 'The word "java" is forbidden.',
      fn: function(field, container){
        if(field.value === 'java') return false;
        return true;
      }
    }
  }
};
var validator = new VanillaValidator(config);

The Html:

<form>
  <div>
    <input type="text" class="custom-validate" data-validate-key="block-word-java">
  </div>
  <div>
    <button type="submit">Send</button>
  </div>
</form>

Pre existing custom validations

there is two pre existing custom validations configured in plugin. They are 'equal-anchored-field', that validates two fields with same values, and different-anchored-field, that validates two fields with different values.

Usage example:

<form>
  <div>
    <input type="text" class="required" id="target">
  </div>
  <div>
    <input type="text" class="custom-validate" data-anchored-field="#target" data-validate-key="equal-anchored-field">
  </div>
  <div>
    <input type="text" class="custom-validate" data-anchored-field="#target" data-validate-key="different-anchored-field">
  </div>
  <div>
    <button type="submit">Send</button>
  </div>
</form>

Here, we use the html attribute data-anchored-field to refer to the target field id; and we use the html attribute data-validate-key to refer to the custom validation we want to use.