VanillaJS Validation

A lightweight validation form that replace Jquery Validation.

⚡️ 24kb in browser only. As a project dependency, it falls to 6kb only.

Getting Started

Download the script file clicking here

OR

Install package via npm:

npm install vanillajs-validation

Creating instance

<form data-form>
  <div data-field-holder>
    <input name="firstfield" />
    <span data-field-error></span>
  </div>
  <div data-field-holder>
    <input name="cpf" />
    <span data-field-error></span>
  </div>
  <div data-field-holder>
    <input name="test" />
    <span data-field-error></span>
  </div>
</form>


<script src="vanillajs-validation.min.js"></script> // Import downloaded script file
<script type="text/javascript">
  var form = document.querySelector('[data-form]');
  var v = new vanillaValidation(form, {
    customRules: {
      valueIs: function (inputValue, ruleValue) {
        return inputValue === ruleValue;
      },
    },
    rules: {
      firstfield: {
        minlength: 2,
        required: true
      },
      cpf: {
        cpf: true,
        required: true
      },
      test: {
        valueIs: 'customRuleTest'
      }
    },
    messages: {
      firstfield: {
        minlength: 'This input should have at least 2 characters.',
        required: 'Input value required!'
      },
      test: {
        valueIs: 'The field value must be "customRuleTest".'
      }
    }
  });
</script>

You can import the module with ES6 syntax too:

// const Validator = require('vanillajs-validation');
import Validator from 'vanillajs-validation';

const formValidation = new Validator(document.querySelector('[data-form]', {
  rules: {
    ...
  }
});

Rules (required)

The rules should be an object passed by in options at the follow format:

rules: {
  fieldName: {
    ruleName: value
  }
}

The default rules avaiable are:

|Rule Name |Value Type |Description | |----------------|-------------------------------|-------------------------| |cep |boolean | [BR] postal code format | |cpf |boolean | [BR] CPF number | |cnpj |boolean | [BR] CNPJ number | |email |boolean | Verify email format | |equalTo |string | A input selector string | |digits |boolean | Only numbers | |maxlength |integer | Max value length | |minlength |integer | Min value length | |required |boolean | Not empty value |

Custom Error Messages

Adding a messages object in options at the follow format:

messages: {
  fieldName: {
    ruleName: 'errorMessage goes here'
  }
}

Custom Field Holder Selector

You can change the default field holder selector ([data-field-holder]) adding the key fieldHolderSelector in options at the follow format:

const formValidation = new Validator(document.querySelector('[data-form]', {
  fieldHolderSelector: '.field-holder'
});

Advanced

vanillaValidation(Form, Options)

Form

Type: DOM Element

The form DOM element

Options

Type: Object

Object with configuration, rules and custom error messages

.addCustomRule(customRuleName, customRuleFunction)

customRuleName

Type: String

Name of the custom rule.

customRuleFunction

Type: Function

The function with the input validation flow. This function will receive 2 params, the inputValue and the ruleValue. Exemple:

  var v = new Validate(form, {
    rules: {
      testField: {
        valueIs: "customRuleTutorial"
      }
    },
    messages: {
      testField: {
        valueIs: "The value should be 'customRuleTutorial'."
      }
    }
  });

  v.addCustomRule('valueIs', function(inputValue, ruleValue) {
    return inputValue === ruleValue;
  });

You can add a customRules object in options when creating the instance too. See the exemple bellow:

  var v = new Validate(form, { // options
    customRules: {
      valueIs: function (inputValue, ruleValue) {
        return inputValue === ruleValue;
      }
    },
    rules: {
      testField: {
        valueIs: "customRuleTutorial"
      }
    },
    messages: {
      testField: {
        valueIs: "The value should be 'customRuleTutorial'."
      }
    }
  });

options:

Events:

onfocusout (default: false)

Type: Boolean

If true, make field validation on the onfocusout event trigger.

{ // options object
  onfocusout: false
}

Handlers:

errorPlacement

Type: Function

After a submit with errors, the errorPlacement is called for every field with an error. The function will receive 2 params, the error (An object with the error type and the message) and the input (The node of the input with error).

{ // options object
  errorPlacement: function (error, input) {
    console.log(error); // { rule: exempleRule, message: 'The field has a exempleRule error' }
    console.log(input); // <input name="exemple" type="text" />
  }
}

beforeErrorPlacement

Type: Function

This will be called only if the errorPlacement has been defined. With personalized errorPlacement, you will need to clean the personalized error fields. This handler is exactly for resolve this issue. A param with validator instance is retorned to the handler function. See bellow:

{ // options object
  beforeErrorPlacement: function (validator) {
    ... // Do the clear personalized input error fields
  }
}

invalidHandler

Type: Function

Called on submit if form has a error. The function receives one param: the validator with the instance object of vanillajs-validation;

{ // options object
  invalidHandler: function (validator) {
    console.log(validator); // Validator instance object
  }
}

submitHandler

Type: Function

Called after the form is validated, this handler should do the ajax request that you need instead of the default form browser submission. The function receives three params: the event, the form (node reference) and the validator instance object;

{ // options object
  submitHandler: function (event, form, validator) {
    console.log(form); // <form data-form> ... </form>
  }
}

Others:

customRules

Type: Object

This object can receive new custom rules. The function of custom rule receive two params: inputValue with the input value and the ruleValue, with rule value

{ // options object
  customRules: {
    valueIs: function (inputValue, ruleValue) {
      // Verify if input value is 'ruleValueHere',
      // or other value write bellow, in 'rules' for 'exempleInput' key.      
      return inputValue === ruleValue; 
    }
  },
  rules: {
    exempleInput: {
      valueIs: 'ruleValueHere'
    }
  }
}

destroy

Type: Function

Remove errors, the validator and left the clean instance.

const formValidation = new Validator(...);

formValidation.destroy();

init

Type: Function

If you want to init an destroyed instance, use this method.

formValidation.init();

submitEventIntercept

Type: function

A function called on the first submit form event trigger, before the form validation and handlers call. It returns the submit event and the validator as params

{ // options object
  submitEventIntercept: function (e, v) {
    e.stopImmediatePropagation(); // In case a second JS is listening to the submit event, you can use this to prevent the listener call
    console.log(v); // Validator instance
  }
}

**

Contribute

In first of all, fork the repo.

After clone the fork, make sure of use node v6.11.4. Install the dependencies, and rollup globally. To build files, use the rollup -c.

Then, make a pull request with a nice description of changes.

License

MIT License.

Made with ❤️ by

• João Julio

be a part of this list too, contribute with us :)