Custom HTML5 Form Validator In Vanilla JavaScript – Just-validate

Category: Form , Javascript | September 28, 2019
Author: horprogs
Views Total: 3,726
Official Page: Go to website
Last Update: September 28, 2019
License: MIT

Preview:

Custom HTML5 Form Validator In Vanilla JavaScript – Just-validate

Description:

Just-validate is a dependency-free, HTML5 data attribute based form validation that supports both client side and server side form validation. Validation rules are fully customizable via JavaScript. Compatible with Bootstrap framework.

Install it via package managers.

# NPM
$ npm install Just-validate

# Bower
$ bower install Just-validate

Basic usage:

Load the minified version of the Just-validate library in the html document.

<script src="js/just-validate.min.js"></script>

Add the data-validate-field=”field-name” attributes to your form fields. All field names:

  • email
  • name
  • text
  • password
  • zip
  • phone
  • and custom
<input type="text" data-validate-field="name" name="name">
<input type="email" data-validate-field="email" name="email">
...

Active the validation functionality on your html form.

new window.JustValidate('.js-form', {
    // options here
});

Customize the default validation rules.

new window.JustValidate('.your-form', {
    Rules: {
      email: {
          required: true,
          email: true
      },
      checkbox: {
          required: true
      },
      name: {
          required: true,
          minLength: 3,
          maxLength: 15
      },
      text: {
          required: true,
          maxLength: 300,
          minLength: 5
      },
      password: {
          required: true,
          password: true,
          minLength: 4,
          maxLength: 8
      },
      zip: {
          required: true,
          zip: true
      },
      phone: {
          phone: true
      }
  }
});

Customize the default error messages:

new window.JustValidate('.your-form', {
    Messages: {
      required: 'The field is required',
      email: 'Please, type a valid email',
      maxLength: 'The field must contain a maximum of :value characters',
      minLength: 'The field must contain a minimum of :value characters',
      password: 'Password is not valid',
      remote: 'Email already exists'
    },
});

Handle the form submission via AJAX.

new window.JustValidate('.your-form', {
    submitHandler: function (form, values, ajax) {
      ajax({
        url: 'YOUR URL',
        method: 'POST',
        data: values,
        async: true,
        callback: function (response) {
          alert('AJAX submit successful! \nResponse from server:' + response)
        },
        error: function (response) {
          alert('AJAX submit error! \nResponse from server:' + response)
        }
      });
    },
    focusWrongField: true,
    invalidFormCallback: function (errors) {
      console.log(errors);
    }
});

Set the color of your error messages:

new window.JustValidate('.your-form', {
    colorWrong: "#B81111"
});

If you want to validate the form fields on the server side.

new window.JustValidate('.your-form', {
    rules: {
      email: {
        required: true,
        email: true,
        remote: {
          url: 'REMOTE URL',
          sendParam: 'email',
          successAnswer: 'OK',
          method: 'GET'
        }
      }
    }
});

Changelog:

09/28/2019

  • v1.5.0: Added focusWrongField and invalidFormCallback

06/29/2019

  • v1.4.0: Added feature to allow the user to provide their own validation function

04/13/2019

  • v1.3.1: fix(semver): test semver

12/02/2018

  • v1.3.0: Added feature for check required radio buttons

09/22/2018

  • v1.2.0: fix path, rename params

You Might Be Interested In:


Leave a Reply