validationChecker is a package to help with validation needs.
npm i validationchecker to install this into your project.
Require the script or put at the top of your main file. In laravel I create a main blade view that contains the all of my meta data, css and js needed for set views. Once you've required/pull in the file, you can add an ID of validationCheck to your form and you should be good to start
<form id="validationCheck" action="/" method="post" ></form>
Once you put this in, ANY form element that the script is available on can be accessed. An event listener will be fired when you click submit to pick up on everything. There are multiple options for validation.
For baisc validation (checking if a field is filled out, checkbox is checked, input has a value) all you have to do is add the class
If all you want is this as validation, make sure its the last class in your input/textarea field like in the example below.
To make sure the error text message is displayed add in a div right below your input/textarea like below.
Text Area Example
The message that will show is
"Please input information into the text area" for the html above, but if you would like to include a custom error message, you just need to add the attribute error-message.
Here's a regular use case example below. This will make sure that there is a value in the text field.
If you'd like your own custom message you can add in
Input text fields have a rule attached though. If you'd like to specify a minimum length for the text input field then just add the class
If you'd like to specify a maximum length for the text input field then just add the class
Hell, if you'd like to do both, go crazy. You just need to add in to the same class
For email fields, just add the class email to the end after validationChecker like below
This will actually run the email through a regex script that checks to make sure there is an
@ symbol as well as a
. which is more than browsers will do.
For select fields, just make sure your first option has a value equal to 0. This option is the option it checks against.
I would only use this if its behind an Auth service and users are trusted
I'm continually working on this package in my spare time. I've got bigger plans for this in the future and will try to update this as much as possible.