Welp, I decided to make my own package out of my validation checker. It’s simple and easy to use for the end user. You can just do npm i validationchecker and that will get you up and running. If you’d like to check out the npm location, here it is https://www.npmjs.com/package/validationchecker.

At the bottom of your form page, you’ll put in

$("form").on("submit", function(e) {
        var form = this;
        let validation = new validationChecker(form);
        if (validation) {
            if (validation.includes(false)) {
                return false;
            } else {
                return true;
            }
        }
    });

In Laravel, I always create a layout file where that is the base for my entire backend or front end. If your familiar with laravel, this is where my @yield('content') would go. If you’re not, imagine a file that contains all your header information and scripts, and this file would be referenced in all other views.

Ok, so you’ve got the script up so now anytime you submit a form, validation checker will be run. We’ll what does validation checker do? How does it tell what needs validation? How does it display the error? We’ll lets start from the top.

Checkboxes

A sample for validation checker on a checkbox is this

<input type="checkbox" class="validationChecker" value="">
<div class="form-text text-muted"></div>

Now the important parts are the class validationChecker and the <div></div> right below the input. The validationChecker tells the package, you need to check this. The <div> directly below the input is where the error message gets shown. I threw those classes in there for styling, but nothing is truly needed for styling, you could literally just have a blank <div> tag below the input field and you’ll be fine. The above item would look like this when errored.

Ok, kinda neat I guess. So what if you wanted a different message below the checkbox instead of that lame message?

<input type="checkbox" class="validationChecker" value="" error-message="Check it you dummy!">
<div class="form-text text-muted"></div>

Input Text

Ok, so that’s a nice little trick. But what about input text, can we do anything with that? Absolutely, if you want you can just add the validcationChecker class to the input which would check that there is text in the box. But, say you have an area where you want it to be a certain min and max length. How could we handle that? Well simple, lets just add more classes.

<input type="text" id="control-demo-1" name="textstuff" class="form-control validationChecker tl-min-10 tl-max-20">
<div class="form-text text-muted"></div>

Here’s a perfect example of a text field that you want it at least 10 characters long and no more than 20. The error message is dynamic and so is the method that reads it, so you could do tl-min-100 tl-max-5000 and it would still work. You could even use them individually, just pop out the tl-max or the tl-min and it will still function properly.

Email

What other cool stuff can this thing do? Well, ever had an issue with email validation? Normal HTML email validation just requires that you put in an @ symbol and doesn’t check for a ‘.’. Well, now you can handle that here as well.

<input  type="email" id="control-demo-2" class="form-control validationChecker email">
<div class="form-text text-muted"></div>

The email class added after validationChecker will make sure that the input is run through a regex that checks for the @ as well as the ‘.’ so you get a little more validation.

Selects

Ok ok, so checkboxes and input text fields, can we check anything else? Of course you can, textareas and selects are handled with this sucker as well. Come get some!

<select class="form-control validationChecker">
<option value="0">Please Select an Option</option>
<option>HTML</option>
<option>CSS</option>
<option>Javascript</option>
<option>Bootstrap</option>
<option>AngularJs</option>
</select>
<div class="form-text text-muted"></div>

Heres an example of a select box. You’re going to want to put in that first option in the select <option value="0">Please Select an Option</option> because that notifies validation checker nothing has been selected if the option is 0.

Textarea

Textareas are just like checkboxes, but this one has an example of the error-message attached.

 <textarea name="control-demo-5" id="control-demo-5" class="form-control validationChecker" cols="30" rows="10" error-message="Check it"></textarea>
<div class="form-text text-muted"></div>

And just like that, you have form validation with error messages for the idiot users. I created this to be simple and have bigger plans for it so that we can get more usage out of it. In later versions I’m going to create custom validation methods and dependents.