Skip to content

Home

Jump to bottom
M ABD AZIZ ALFIAN edited this page Jun 29, 2024 · 45 revisions

Welcome to the native-form-validation wiki!

Table of Contents

Why I should use this?

There is a lot of Form Validation, but mostly of them was created for jQuery and too bloated.
So here is the reason why native-form-validation was created:

  • Simple and Customizable.
  • Lightweight (minified and gzipped size only 1Kb).
  • No hidden or silent magic in submit.
  • Native (work for most all JavaScript UI framework).
  • Build to follow ES5/ES6 Standard (support for old browser).

Back to top

Getting Started

Install using NPM

$ npm install native-form-validation

// load using require in nodejs
const FormValidation = require('native-form-validation');

// or load using import in typescript
import FormValidation from 'native-form-validation';

// or load use with path for client side
<script src="node_modules/native-form-validation/dist/formvalidation.min.js"></script>

Or simply use with CDN

<!-- Always get the latest version -->
<!-- Not recommended for production sites! -->
<script src="https://cdn.jsdelivr.net/npm/native-form-validation/dist/formvalidation.min.js"></script>

<!-- Get minor updates and patch fixes within a major version -->
<script src="https://cdn.jsdelivr.net/npm/native-form-validation@1/dist/formvalidation.min.js"></script>

<!-- Get patch fixes within a minor version -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/formvalidation.min.js"></script>

<!-- Get a specific version -->
<!-- Recommended for production sites! -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/formvalidation.min.js"></script>

Usage

var form = new FormValidation();

// Set the rules
form.rules({
    username: {
        required: true,
        message: 'Username must be min 3-20 chars!',
        minLength:3,
        maxLength:20,
        regex: /^[a-zA-Z0-9]/,
        errorPlace:'username-error',
        errorAddClass: {
            username_group:'has-danger',
            username:'is-invalid'
        }
    },
    email: {
        regex: /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
        errorPlace:'email-error',
        errorAddClass: {
            email_group:'has-danger',
            email:'is-invalid'
        }
    }
});

// Validate all
form.validate();

// Determine is Valid all
if(form.isValid()) {
    // run your code
}

// Validate per element
form.element('username').validate();

// Determine is Valid per element
if(form.element('username').isValid()) {
    // run your code
}

Back to top

Method

form.rules(options)

First we have to create the rules for form validation.

Example:

form.rules({
  username: {
    required: true,
    message: 'Username must be min 3-20 chars!',
    minLength:3,
    maxLength:20,
    errorPlace:'username-error',
    errorAddClass: {
      username_group:'has-danger',
      username:'is-invalid'
    }
  });

Based from example above, now we explain the available options in form.rules().

Options in form.rules()

  • element {object} : Create rules for element. If you want to set rules for username see above example.
  • required {bool} : Make sure the input is not empty. Default is false. [optional]
  • trim {bool} : Sanitize space and whitespace on first and tail. Default is true. [optional]
  • message {string} : Customize the error text message. [optional]
  • minLength {int} : Make sure the input has {minLength} of chars. [optional]
  • maxLength {int} : Make sure the input not more than {maxLength} of chars. [optional]
  • errorPlace {string} : Display the error text into spesific element. [optional]
  • errorAddClass {object} : Add custom error class into element. [optional]
  • regex {regex} : Create validation based on regex. See this example. [optional]
  • method {function} : Create custom validation without regex. See this example. [optional]

Back to method

form.add(id, objRules)

Add a rule

  • id {string} : the name of element id.
  • objRules {object} : the option rule per id.

Example:

form.add('address', {
  required: true,
  message: 'Address must be min 10 chars!',
  minLength: 10,
  errorPlace: 'address-error',
  errorAddClass: {
    address_group: 'has-danger',
    address: 'is-invalid'
  }
})

Back to method

form.remove(id)

Remove a rule

  • id {string | string[]} : the name of element id.

Example:

form.remove('address');

// or
form.remove(['email', 'address']);

Back to method

form.validate(callback)

Make validation based on rules.

  • callback(error) : Callback is to show the error validation. [optional]

Example:

form.validate(function(error) {
  if(error) {
    // you are able to customize the element style form based on error validation object.
  }
});

Back to method

form.isValid()

Determine if validation has valid or not.

Example:

if(form.isValid()) {
  // call ajax submit
}

Back to method

form.element(id)

Make validation for single element. If you have set the rules for many element then if you want to validate for single element, for example if you want to play around in event.

  • id {string} : the name of element id.

Example:

// Vanilla
var input = document.getElementById('username'); 
input.addEventListener('blur', function(e){
  form.element('username').validate();
});

// jQuery
$('#username').on('blur', function() {
  form.element('username').validate();
});

Back to method

form.setCustomError(errMessage)

This will create a new custom error message for single element.

Example:

form.setCustomError(errMessage);

Back to method

form.reset()

This will reset all error message on your form.

Example:

form.reset();

Back to method

Live Example

I have made two basic examples with Bootstrap 4 on JSFiddle. Hope this will make easier you to understand.

Back to top

Clone this wiki locally