OCTAVALIDATE FOR REACTJS

Client-side form validation library for ReactJS

Octavalidate - ReactJS is a react form validation library that helps you validate your react forms.

It is very easy to implement and offers a wide range of validation rules.

INSTALL OCTAVALIDATE

To use this library, you have to install it in your project through NPM.

$ npm install octavalidate-reactjs

If you wish to visit this package on NPM, click on the button below.

Visit package

Once the package has been installed, follow the process below to setup validation on your form;

  1. Import the module
  2. Create a login component
  3. Within your component, create a function that will handle form submission
  4. Initialize the library within this function.
  5. Now invoke the validate() method
  6. When you have setup the call back function, return the form

Import the module at the top of your React page

import { octaValidate } from 'octavalidate-reactjs'

Create a component for the page

import { octaValidate } from 'octavalidate-reactjs'

export default function Login() {

Within this component, create a function that will handle form submission

import { octaValidate } from 'octavalidate-reactjs'

export default function Login() {
//handle form submission
const handleSubmit = function (e) {

}
}

Now initialize the library within this function.

Make sure that the id used to initialize this library is the same as the form itself.

import { octaValidate } from 'octavalidate-reactjs'

export default function Login() {
//handle form submission
const handleSubmit = function (e) {
//initialize the library
const myForm = new octaValidate('form_login')
}
}

Once you have initialized the library, invoke the validate() method on the validation instance to begin validation on the form

The return type of validate() method is Boolean

  • true means there are no validation errors
  • false means there are validation errors

This means that if the validate() method returns true, we are free to process the form.

Here's the full code

login.js

import { octaValidate } from 'octavalidate-reactjs'

export default function Login() {
//handle form submission
const handleSubmit = function (e) {
//initialize the library
const myForm = new octaValidate('form_login')
//prevent reload
e.preventDefault();
//begin validation on form and check if it passed
if(myForm.validate() === true){
/** process form data here**/
}
}
//return the form
return(
<form id="form_login" method="post" noValidate onSubmit={handleSubmit}>
<input id="inp_email" name="email" type="email" octavalidate="R,EMAIL" />
<input id="inp_pass" name="password" type="password" octavalidate="R" minLength="8" />
<button type="submit">Login</button>
</form>
)
}

If you look at the code above, you will notice that a form was returned from the component.

This form has an ID that is equal to the one used to initialize the validation instance.

This form also has inputs with the attribute octavalidate. This attribute contains the validation rules that will be used to validate that particular form input. Read more on validation rules here

Here are some things to note when setting up form validation using this library;

  1. Make sure the a form ID exists on the form and the input element IDs are unique!
  2. Make sure to initialize the validation library within the callback function that handles form submission!
DEMO

Would you like to see a simple implementation of this library on a react project? Click the button below to visit the repository

Vist repo