Octaform help developers to validate all forms in a simple way being completely agnostic to the framework that you're using

Installation

yarn add octaform

// or

npm install octaform --save

Let's get started importing the Octaform core and add the validations that the project will use, and the last step will be you write your schema that is the map of all fields that will be validated

import Octaform from 'octaform';

// The method .add is used to set all validations that will be used by the user schema
Octaform.validator.add(
  // Write or import your validations here as an Array[Object]
);

// Call the validations for all fields specified on the schema below
Octaform.validate({ 
  // Write your schema here
})

Validator returns an object where you can access all validations previously defined in the .add method

The .add is used to define the validation that is used by the schema. This method awaits a parameter as Array[Object] or Object. Follow the example below:

Create a validation file (e.g. email.validation.js):

export default {
  // (Required) The name will be used on validation schema
  name: 'email', 
  // (Required) User-friendly error message
  message: 'Please enter a valid email address', 
  // Parameter validator accept JS types (e.g. String/Boolean/Function/...)
  paramType: String,
  /**
   * fn (Required): Validation function that is used to validate
   * @param {string} value - Field value
   * @param {HTMLElement} element - DOM element
   * @param {*} param - Get the parameter defined in schema rules (e.g. minlength:3)
   * 
   * @return {boolean} Return true when the field has a valid value and false when is invalid
   */
  fn: (value, element, param) => {
    // Validation logic goes here and must return a boolean value
    
    return (true || false);
  },
};

The method validate is used to call the validation based in a schema. Check out an schema example:

const Schema = {
  // Field name is defined on the name attribute of input (Required)
  field_name: {
    ref: HTMLElement, // (Optional)
    value: String, // (Optional)
    rules: Object || Array // (Required)
    messages: Object // (Required)
  },
  others...
};

The field name is a required property it is used to get the input details from the HTML, you must define a name attribute on your HTML field or if you are using other platform like react native you can define an attribute called ref instead and pass directly the html element. When using name attribute you are able to set you rules as an Object or a single validation using String instead.

const Schema = {
  field_name: {
    ref: HTMLElement // Optional
    value: "field value" // Optional,
    rules: {} // Required
    messages: {} // optional
  }

  // OR

  field_name: "required"
};

(Web Only) - Set the attribute name to recognize the DOM element and apply the validation: e.g. <input type="text" name="field_name" />

Ref is used to get the input details through the HTML, it is used when you are validating in another platform like react native when the DOM is not present. The input will be your HTML element.

const Schema = {
  firstName: {
    ref: HTMLElement
  }
};

You can add a key to define your custom value and validate without search in the DOM, it's helpful when you are using a library such as React/Angular/Vue/etc...

const Schema = {
  firstName: {
    value: 'My field value'
  }
};

The rules is composed by key: value, the key is the validation rule that will be used, the key name is defined by the method .add that was defined previously, and value is a parameter that could be accessible by your validation method. The rules should be an Object || Array follow below the example:

const Schema = {
  firstName: {
    rules: {
      required: true
    }
  }
};

OR

const Schema = {
  firstName: {
    rules: ['required', 'minlength:3']
    // minlength is the validation name and the number 3 is a parameter
  }
};

Can be defined a custom message without using default validation, for it you should define a key messages as an Object and specify which validation you want to overwrite, follow the example below:

const Schema = {
  firstName: {
    messages: {
      required: 'My custom message to required validation'
    }
  }
};

Follow this repository and use our preset validation https://github.com/octaform/octaform-additional, or create your own validation using the Octaform API

Check out the demo page and see the validations working and have fun!

Octaform is MIT licensed