Custom HTML5 Form Validator In Vanilla JavaScript – Just-validate

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


Custom HTML5 Form Validator In Vanilla JavaScript – Just-validate


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 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) {
        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) {

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'



  • v1.5.0: Added focusWrongField and invalidFormCallback


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


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


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


  • v1.2.0: fix path, rename params

You Might Be Interested In:

One thought on “Custom HTML5 Form Validator In Vanilla JavaScript – Just-validate

  1. luki

    ia have two file to uploade, how can i upload them?
    many thanks


Leave a Reply