Skip to content

Home

Jump to bottom
M ABD AZIZ ALFIAN edited this page Oct 29, 2019 · 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.
  • Native (work for most all JavaScript UI framework).
  • Lightweight (minified size only 4Kb).
  • Use ES5 Standard (support for old browser).
  • No hidden or silent magic in submit (ex. async await before redirects).

Getting Started

Install using NPM

$ npm install native-form-validation

// then use with path
<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
form.validate();

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

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]

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.
  }
});

form.isValid()

Determine if validation has valid or not.

Example:

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

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('keyup', function(e){
  form.element('username').validate();
});

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

Live Example

I have made simple live example with Bootstrap 4. Hope this will make easier you to understand. Check this link

Clone this wiki locally