Validate-me logo

Validate-me

Extensible & blazing fast validation library

Guides →

⚡️ Blazing fast

The client only loads what it needs. Stop parsing rules you won't never use!

🔌 Extensible

You use Vue.js? React? Svelte? Vanilla? The core is written in ES6++ and can be used with(out) any framework!

🙅‍ No configuration

Stop reading docs and testing configurations until things work. Validate-me just works™!

Quick start

Install

# install with npm
npm install --save @validate-me/vanilla

# install with yarn
yarn add @validate-me/vanilla

Use

import Validateme from '@validate-me/vanilla/Validateme';
import ValidatemeField from '@validate-me/vanilla/ValidatemeField';
import vanillaConnector from '@validate-me/vanilla';

window.addEventListener('load', () => {
  const myForm = document.getElementById('my-form');
  // 1. Create the form object
  const validateme = new Validateme();
  // 2. Create each field object
  const nameField = new ValidatemeField({
    name: 'name',
    rules: [['required'], ['len', '2', '10']],
  });
  const nameInput = document.getElementsByName('name')[0];

  // 3. Add the field to the form. Add input listeners to the input.
  vanillaConnector(nameField, validateme, nameInput);

  // 4. Listen to the submit action
  myForm.addEventListener('submit', evt => {
    evt.preventDefault();

    if (!validateme.validate()) {
      return;
    }

    // Send data to server
    // ...
    // And if the server returns new invalid rules...
    const errorsFromServer = {
      name: ['isAlpha'],
    };
    validateme.process(errorsFromServer);
});