Just-validate

Lightweight (~4,5kb gzip) form validation in Javascript Vanilla, without dependencies, with customizable rules (including remote validation), customizable messages and customizable submit form with ajax helper.

Demo:
Classic validation https://horprogs.github.io/Just-validate/
Classic validation with tooltips https://horprogs.github.io/Just-validate/tooltip.html

How to use

npm

npm install just-validate --save

yarn

yarn add just-validate

Include the script of the Just-validate on your page

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

Create your form

<form action="#" class="js-form form">
    <div class="row">
      <div class="form-group col-md-6">
        <label for="name">Enter your name</label>
        <input type="text" class="form__input form-control" placeholder="Enter your name" autocomplete="off" data-validate-field="name" name="name" id="name">
      </div>
      <div class="form-group col-md-6">
        <label for="email">Enter your email</label>
        <input type="email" class="form__input form-control" placeholder="Enter your email" autocomplete="off" data-validate-field="email" name="email" id="email">
      </div>
    </div>
    <div class="form-group">
      <label for="password">Enter your password</label>
      <input type="password" class="form__input form-control" placeholder="Enter your password" autocomplete="off" data-validate-field="password" name="password" id="password">
    </div>
    <div class="form-group">
      <label for="password">Enter your text</label>
      <textarea name="msg" cols="30" rows="10" class="form__textarea form-control" data-validate-field="text" id="text"></textarea>
    </div>
    <div class="form-group">
      <input type="checkbox" id="checkbox" class="form__checkbox" data-validate-field="checkbox" checked><label for="checkbox">I agree</label>
    </div>
    <div class="form-group">
      <label><input type="checkbox" class="form__checkbox" data-validate-field="checkbox2" checked>I agree</label>
    </div>
    <div class="form-group">
      <label><input type="radio" name="radio" class="form__radio" data-validate-field="radio">Male</label>
      <br>
      <label><input type="radio" name="radio" class="form__radio" data-validate-field="radio">Female</label>
    </div>
    <button class="form__btn btn btn-primary">SUBMIT</button>
  </form>

Fields

data-validate-field : Name of field to which the rule will be applied

Plugin has default fields, which already have rules.

Field: email

• required
• email
• remote

Field: name

• required
• minLength: 3
• maxLength: 15

Field: text

• required
• minLength: 5
• maxLength: 300

Field: password

• required
• password (at least 1 digit and 1 letter)
• minLength: 4
• maxLength: 8

Field: zip

• required
• zip (4-5 digits)

Field: phone

• phone (format 111-222-3333)

You can create your own fields, e.g. data-validate-field="myField".

Rules

• required - Required field, not empty
• email - Check a valid email address
• minLength - Limit the minimum value
• maxLength - Limit the maximum value
• password - At least 1 letter and 1 digit
• zip - 4-5 digits
• phone - Format 111-222-3333
• remote - validate value via remote api
• strength - validate field for default or custom regexp
• function - provide your own validation function

More about remote rule: Rule check remote server api for correct answer. For example:

remote: {
    url: '/check-correct',
    successAnswer: 'OK',
    sendParam: 'email',
    method: 'GET'
}

• url - remote server api url
• successAnswer - expected response from server, if value is correct
• sendParam - parameter to be sent to server
• method - GET or POST

More about function rule: Provide a function which takes two arguments name and value and returns true or false

• name - the name of the element
• value - the value of the element

The following example will only validate input of a field if it is "hi"

function: (name, value) => {
    if(name == 'hi'){
        return true;
    }else{
        return false;
    };
}

Strength rule format: Default (at least one uppercase letter, one lowercase letter and one number):

strength: {
    default: true
}

Custom (use your own regexp for check):

strength: {
    custom: '^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]'
}

Settings

new window.JustValidate(element, options);

• element - string, selector of DOM element
• options - object

Initiate plugin:

First argument - selector of DOM element.

new window.JustValidate('.js-form');

In this case default rules and messages will be applied.

Also, you can customize validation:

new JustValidate('.js-form', {
    rules: {
      checkbox: {
        required: true
      },
      myField: {
        required: true
      },
      email: {
        required: false,
        email: true
      },
      password: {
        strength: {
          default: true,
        }
    },
    messages: {
      name: {
        minLength: 'My custom message about only minLength rule'
      },
      email: 'My custom message about error (one error message for all rules)'
    },

    submitHandler: function (form, values, ajax) {

      ajax({
        url: 'https://just-validate-api.herokuapp.com/submit',
        method: 'POST',
        data: values,
        async: true,
        callback: function(response)  {
          console.log(response)
        }
      });
    },
  });

You can override custom message for once rule or for all at once rules.

Also, you can validate for required radiobuttons. For this, you need to create input[type="radio"] fields with identical data-validate-field (it's important).

Submit form

You can override standard submit form, using method submitHandler. It has 3 arguments:

• form - DOM link to form
• values - object of fields values
• ajax - function of XMLHttpRequest

Function ajax helps you to send XMLHTTPRequest.

Format:

ajax({
    url: 'https://just-validate-api.herokuapp.com/submit',
    method: 'POST',
    data: values,
    async: true,
    callback: function(response)  {
      console.log(response)
    }
});

Tooltip

You can show errors in the form of tooltips.

To do this, connect the file styles dist/css/justValidateTooltip.css or dist/css/justValidateTooltip.min.css on page.

<link rel="stylesheet" href="./path/to/justValidateTooltip.min.css">

For a container inside of which input, add a class just-validate-tooltip-container or add our class

 <div class="form-group col-md-6">
    <label for="name">Enter your name</label>
    <div class="just-validate-tooltip-container">
        <input type="text" class="form__input form-control" placeholder="Enter your name" data-validate-field="name">
    </div>
 </div>

You can customize time show of error, using property fadeOutTime, for example:

new window.JustValidate('.js-form', {
    tooltip: {
        fadeOutTime: 4000 // default value - 5000 
    }
});

You can customize class hide of tooltip, using property fadeOutClass, for example:

new window.JustValidate('.js-form', {
    tooltip: {
        fadeOutClass: '.hide' // default value - just-validate-tooltip-hide
    }
});

You can customize class inside of which input, using property selectorWrap, for example:

new window.JustValidate('.js-form', {
    tooltip: {
        selectorWrap: '.tooltip-wrapper' // default value - just-validate-tooltip-container
    }
});

Styling

You can customize style color of error, using property colorWrong, for example:

new window.JustValidate('.js-form', {
    colorWrong: 'red'
});

Error fields and messages have classes: js-validate-error-label and js-validate-error-field

Examples

Validate multiple remote values with custom messages

new window.JustValidate('.js-form-1', {
    rules: {
        email: {
            email: true,
            remote: {
                url: 'https://just-validate-api.herokuapp.com/check-correct',
                sendParam: 'email',
                successAnswer: 'OK',
                method: 'GET'
            }
        },
        login: {
            remote: {
                url: 'https://just-validate-api.herokuapp.com/check-correct',
                sendParam: 'login',
                successAnswer: 'OK',
                method: 'GET'
            }
        }
    },
    messages: {
        email: {
            remote: 'Email already exist',
            email: 'Email not valid!'
        },
        login: {
            remote: 'Login already exist',
            required: 'Login is required!'
        }
    },
});

Classic validation with custom submit form and ajax helper

new window.JustValidate('.js-form', {
    rules: {
        checkbox: {
            required: true
        },
        checkbox2: {
            required: true
        },
        email: {
            required: true,
            email: true,
        }
    },

    submitHandler: function (form, values, ajax) {
        ajax({
            url: 'https://just-validate-api.herokuapp.com/submit',
            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)
            }
        });
    },
});

Changelog

1.1.0

Added rule for check strength of password (default and custom)

1.2.0

Added tooltip style error

1.3.0

Added feature for check required radio buttons

Contributing

* Check the open issues or open a new issue to start a discussion around your feature idea or the bug you found.
* Fork repository, make changes, add your name and link in the authors session readme.md
* Send a pull request

Thank you