Why validating forms are so hard yet?

Well, every web programmer knows that validating forms on the web is boring and hard. It's not a super cool thing to do.

I'm a web programmer, too. And I know that.

Imagine a super complex application with more than 10 fields. Numbers, texts, currencies, email, files, etc. When a programmer see that, believe me, we'd prefer to go to hell, literally.

Some solutions appeared and are very good, for example, when you use Angular, it provides elegant methods to identify if the fields or forms are pristine, dirty or valid. But, now always we use Angular in our projects. But it's a nice idea yet.

When HTML5 came at our doors showing the new input attributes and validations schemas, our face was like:

Literally.

I remember as it was yesterday: required, min, max, step, email, color, tel, date.

I ALWAYS WANTED TO USE THIS GIF! SERIOUSLY! (I'm creating this story just to use it hehe)

But, this doesn't resolve something bigger.

Thinking that, I decided try to finish that creating a super cool library.

Ladies and gentleman, I present for you:

Yes, this is the super cool logo :D — It's not a gif :(

https://github.com/cezarlz/boss-validator

For now and forever, your problems finished here. I think so.

boss-validator validates objects and forms. It was thought for Browsers and Node.js. No jQuery needed. Almost free-dependencies.

Just take a look how is simple implement it:

You have your form:

<form id="contact">
<input type="text" name="fullname" placeholder="Your full name" />
<input type="email" name="email" placeholder="Valid emails adress" />
<input type="number" name="age" placeholder="Your age" />
<textarea name="message" placeholder="Your message"></textarea>

<button>Send!</button>
</form>

Each input field has a name. Right?

So you grab your form:

var fields = document.querySelector('#contact');

or for objects:

var fields = { fullname: 'Cezar Luiz', email: 'cezarluiz.c@gmail.com' }

Create your rules passing the name of the fields and the validator:

var rules = {
fullname: {
required: true,
minlength: 2,
maxlength: 60
},
email: {
required: true,
email: true
},
age: {
bigger_equal: 18,
number: true
},
message: {
required: true,
minlength: 5,
maxlength: 2000
}
};

So when the user submit the form, just validate:

form.addEventListener('submit', function (e) {
e.preventDefault();

Boss
.validate(fields, rules)
.then(() => {
console.log('Fields is valid!');
})
.catch(errors => {
console.log('Oops..! Form is invalid, please review it.');
});
});

Simple as that :)

If you want, you can install via npm or bower:

$ npm install boss-validator
$ bower install boss-validator

The library also has support for transformers (no, not Optimus Prime here) and i18n. Easy way to add your own validators and messages. Accept regex validators. There are validators for strings, numbers, booleans, email, url, credit card and more.

We need to improve it and I have some ideas to the future, like live validations on Browser, css classes on form and fields to identify if the form or fields are valid.

boss-validator is open-source, if you liked you can contribute :D

JavaScript is just love. Bye!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.