Easiest JS Validator

It is a simple library ready to pull in into your project. Its goal is to provide an easy way to validate HTML forms without the headache of adapting any other complicated packages. Also, it was written in es2015, so you can get your feet wet with this amazing new way of working with JS.

Installation

To install this package you just need to open your console line and type npm i easiest-js-validator. If there is a problem during the installation, you can try again using the force param as so npm i -f easiest-js-validator

Gettings started

First of all, you will have to import the library into the file where you are operating. As so,

import Validator from 'easiest-js-validator';

Take a look at the example published.

illustration

Also, you will be able to see the online DEMO

Validation rules array

This array contains all the information about the form fields that you want to be validated where its keys are the same as your form object, As so:

<!-- input example is linked through VUEJS -->
<input type="text" v-model = "profile.first_name">

//rules object
rules: {
     first_name: 'required,alpha',
     last_name: 'required,alpha',
     email: 'required,email',
     address: 'required',
}

Implementation

//form object
profile: {
     first_name,
     last_name,
     email,
     address,
}

Implementation

Invoke the validator class

At this point, we just have to call the static method make into the validator class and pass the info which it will operate. As so,

let validate = Validator.make(profile, rules, messages);

Where messages will be the responsible of bringing the language into the class, in order for it to offer a better output, such as field is required, email is not valid, etc. It is important to know that messages have to meet the same structure as profile object.

//messages object example
messages: {
     first_name: 'required',
     email: 'must have a valid format'
}

Implementation

If there were errors

If there were errors, you will have an associative array using how reference the exactly field that does not meet the rules. as so,

errors = [
    first_name: "The field is required.",
    last_name: "The field is required.",
    email: "The email field must be a valid email address.",
    address: "The field is required."
]

Implementation

Now, you have access to the validation messages and can proceed as you want.

How can I see if my field has errors?

This is easy enough. You only have to check the returned array and show the result on the form in the best way for you. As so,

hasError: function (key)
{
     return typeof errors[key] !== 'undefined';
}
 
if (hasError('first_name')) {
     console.log(errors['first_name'])
}
 

You can see the demo on DEMO

Features

You will be able to validate you forms againts any of this rules:

• url
• integer
• numeric
• alphaNum
• email
• alpha
• required
• digits
• length
• blank
• dateISO
• phoneNumber

Summary

In spite of the demo was written in vuejs, you will be able to pull in the validator class under any other js framework

If you have any question, shoot me an email. I will be glad of helping you out.

Contributing

Please feel free to fork this package and contribute by submitting a pull request to enhance the functionalities.

License

The MIT License (MIT). Please see License File for more information.

How can I thank you?

Why not star the github repo? I'd love the attention! Why not share the link for this repository on Twitter? Spread the word!

Don't forget to follow me on twitter!

Thanks!

Gustavo Ocanto. [e-mail]