Octavalidate for Native JS

Learn how you can install this library and use it to validate your forms client-side with Native JavaScript.

There are Demo forms on different sections of this documentation.

INSTALLATION

CDN
<!-- Place this script before the </head> tag -->
<script src="https://unpkg.com/octavalidate@latest/native/validate.js"></script>
LOCAL
  • Download and import the latest release to your project.
  • In your project, create a script tag and link the file validate.js
  • Place the script before the </head> tag.
<script src="octaValidate/src/validate.js"> </script>
Download

HOW TO USE

Create a form tag with input elements, add the attribute octavalidate to these form inputs, then specify validation rules within this attribute.

Click on the button below to see all validation rules.
Learn more  
<form id="my_form">
  <input octavalidate="R,EMAIL" id="inp_email" name="email" type="email">
  <input octavalidate="R,DIGITS" id="inp_age" name="age" length="2" type="number">
  <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.

When you are done, begin validation on that particular form by invoking the validate() method.

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

The return type of this method is Boolean

  • true means there are no validation errors
  • false means there are validation errors
<script>
//create new instance of the function
const myForm = new octaValidate('my_form');
//listen for submit event
document.querySelector('#my_form').addEventListener('submit', function(e){
  e.preventDefault();
  //invoke the method
  if(myForm.validate() === true){ 
    //validation successful, process form data here
  } else {
    //validation failed
  }
})</script>
DEMO FORM