Skip to the content.

octaValidate V1.2.0

This library helps to validate your HTML forms using validation rules, sophisticated regular expressions and form input attributes.

We have included a demo.html file which you can open to see how this library really works.

We have developed this Library to work server-side on PHP language and as such, you can validate your forms server-side using this Library for PHP. Visit the repository

DOCUMENTATION

Visit the DOCUMENTATION to learn more about this GREAT Library!

INSTALL

CDN

Place this script before the </head> tag.

<script src="https://unpkg.com/octavalidate@1.2.0/native/validate.js"></script>

NPM

Visit this Link to the Documentation to learn how to install this Library with NPM.

LOCAL

How to Use

Create a form tag with input elements and set the attribute octavalidate with a list of validation rules on the form input(s) that you want to validate.

<form id="form_register">

    <input id="inp_email" name="email" type="email" octavalidate="R,EMAIL">

    <input id="inp_age" name="age" type="number" octavalidate="R,DIGITS">

    <button type="submit">submit</button>

</form>

Make sure that all input elements have a unique identifier. If you fail to attach an id to the input element, any validation rule applied to the element will be ignored.

Now you need to create a new instance of the function and pass in the form id as the first argument, and any configurationoptions as the second argument.

Then begin validation on that particular form by invoking the validate() method.

It is recommended to invoke the validate() method when the form is submitted.

The return type of the validate() method is Boolean.

//create new instance of the function
const myForm = new octaValidate('FORM_ID');
//listen for submit event
document.getElementById('FORM_ID').addEventListener('submit', function(e){
    e.preventDefault();
    //invoke the method
    if(myForm.validate() === true)
    { 
      //validation successful, process form data here
    } else {
      //validation failed
    }
})

VALIDATION RULES

Here are the inbuilt validation rules.

Didn’t see a validation rule that you need for your form? Don’t worry!

With octaValidate, you have the power to define your custom rule and it will be processed as if it were an inbuilt rule.

CUSTOM VALIDATION RULES

In some cases where you need to define a custom rule, use the method below.

//syntax for custom rule
myForm.customRule(RULE_TITLE, REG_EXP, ERROR_TEXT);

Here’s a custom rule to validate an email address.

//custom email validation
const rule_title = "EML";
const reg_exp = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
const err_txt = "Please povide a valid Email Address";
//create new instance of the function
const myForm = new octaValidate('form_register');
//define the custom rule
myForm.customRule(rule_title, reg_exp, err_txt);

Then on your Input Element, provide the rule title [ EML ].

<input type="email" id="inp_email" octavalidate="EML">

Note that: All Rule Titles are case-sensitive!

MORE CUSTOM RULES

What if you want to define more validation rules?

All you need to do is to create an object with your validation rule, regular expression and error text separated by a comma, then invoke the method moreCustomRules().

//EMAIL AND URL VALIDATION RULES
var rules = {
    "EML": [/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/, "A Valid email address is required"],
    "URI": [/^((?:http:\/\/)|(?:https:\/\/))(www.)?((?:[a-zA-Z0-9]+\.[a-z]{3})|(?:\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1(?::\d+)?))([\/a-zA-Z0-9\.]*)$/i, "Please provide a valid URL"]
};

//create new instance of the function
const myForm = new octaValidate('form_register');
//define more custom rules
myForm.moreCustomRules(rules);

Note that: You do not need to pass in your regular expression as a string! This is because the JavaScript engine natively recognizes regular expressions.

CUSTOM ERROR MESSAGE

We’ve added an extra attribute that will enable you to provide your custom error message incase a validation fails.

The table below shows the validation rule and the attribute that you can use to change its error message.

Validation Rule Description Validation Text Attribute
R Required ov-required:msg
EMAIL EMAIL ov-email:msg
ALPHA_ONLY Alphabets Only ov-alpha-only:msg
ALPHA_SPACES Alphabets and Spaces ov-alpha-spaces:msg
ALPHA_NUMERIC Alphabets with Numbers ov-alpha-numeric:msg
LOWER ALPHA Lowercase letters ov-lower-alpha:msg
UPPER_ALPHA Uppercase letters ov-upper-alpha:msg
PWD Password ov-pwd:msg
DIGITS Digits ov-digits:msg
URL URL ov-url:msg
URL_QP URL with Query Parameters ov-url-qp:msg
DATE_MDY Date in the format MM/DD/YYYY ov-date-mdy:msg
USERNAME Username ov-username:msg
TEXT General Text ov-text:msg

Here’s how to use the custom error message

<input type="text" octavalidate="R,USERNAME" ov-required:msg="Your username is required" ov-username:msg="Username should contain letters or numbers" name="username" id="inp_uname">

Validate a CHECKBOX, or a FILE INPUT ELEMENT using the R validation rule to mark the field as required, and you may provide a custom message using the ov-required:msg attribute.

ATTRIBUTES VALIDATION

Currently we have 3 types of attribute validation:

LENGTH VALIDATION

You can validate: maxlength, minlength and length by providing it as an attribute to the form input.

<input type="text" id="inp_maxlength" maxlength="5">

<input type="text" id="inp_minlength" minlength="5">

<input type="text" id="inp_length" length="5">

EQUALTO VALIDATION

You can check if two inputs contain the same values, using the attribute equalto on the input element, with a value containing the ID of the other input element to check against.

<input type="password" id="inp_pwd1" octavalidate="R,PWD" ov-required:msg="Your Password is required">
<!--check if both values match -->
<input type="password" id="inp_pwd2" equalto="inp_pwd1" ov-equalto:msg="Both passwords do not match">

FILE VALIDATION

You can validate: accept, accept-mime, size, minsize, maxsize by providing it as an attribute to the file input element.

Please refer to the documentation to learn more about validating a file input element.

API METHODS

STATUS

You can invoke the status() method anytime to check the number of validation errors on the form.

//Your validation instance
const myForm = new octaValidate('form_register');
//check validation errors
myForm.status();

CALLBACKS

You can now define a function that will execute if there are validation errors or a function that will execute if there are no validation errors.

To define a callback, invoke this method and pass in your function as an argument.

//create new instance of the function
const myForm = new octaValidate('form_register');
//success callback
let successCB = function(){
    alert("No validation error");
}
//error callback
let errorCB = function(){
    alert(myForm.status()+" validation error(s)")
}
//invoke the method
myForm.validateCallBack(successCB, errorCB);

If there are no validation errors, successCB will be executed but if there are validation errors, the errorCB will be executed.

Note: This callback feature will only work if validation has started on the form. Make sure to start validating the form by invoking the validate() method when the form is being submitted.

CONFIGURATION

We have 3 configuration options:

Since Version 1.1.4, any value provided by the user that matches any of the strict words, will be flagged as “not allowed”.

To use any of these options, provide it as an object and pass it as the second argument when creating an instance of octaValidate.

//config options
const options = {
  successBorder : true, 
  strictMode : true, 
  strictWords : ["error", "false", "invalid"]
}
//my function instance
const myForm = new octaValidate('FORM_ID', options);

REFERENCE METHODS

After creating a new instance of the function, the methods below becomes available for use.

//create instance of the function
const myForm = new octaValidate('FORM_ID');

There are more methods than the ones listed above, Please refer to the documentation to learn more.

LEARN MORE

Need a detailed explanation on how to use this library? Read the article on Medium

DEMO

SCREENSHOTS

Author

Simon Ugorji

Support Me

Donate with PayPal

Buy me a coffee

Contributors

Simon Ugorji