Basic Form Validation JavaScript Library – dakrajs

Category: Form , Javascript | March 22, 2016
Author: bluzky
Views Total: 2,118
Official Page: Go to website
Last Update: March 22, 2016
License: MIT

Preview:

Basic Form Validation JavaScript Library – dakrajs

Description:

dakrajs is a pure JavaScript library used for validating form fields with custom error messages on submit. Supports for required fields, email addresses, phone numbers, passwords and much more. Very simple and easy to implement.

How to use it:

Just download and include the dakrajs library on the html page and we’re ready to go.

<script src="dakra-validator.js"></script>

Add validation rules to form fields using native attributes as follows:

<input type="text" placeholder="first name" id="first-name"  name="first-name" required>
<input type="email" id="email" name="email" placeholder="[email protected]" required>
<input type="number" id="phone" name="phone" min-length="10" max-length="10" required></input>
<input type="checkbox" name="hobby" value="game" required min="2"> Play game

Print error messages above the form when submitting.

function printError(errors){
  var html = "";
  for(var i = 0; i < errors.length; i++){
    html += "<li>" + errors[i][0] + ": " + errors[i][1] + "</li>";
  }

  document.getElementById('error-list').innerHTML = html;
  dakra.removeClass(document.querySelector('.error'), 'hidden');
}
var form = document.getElementById('basic-form');
form.addEventListener('submit', function(event){
  var errors = dakra.validate('#basic-form');
  if(errors.length > 0){
    printError(errors);
    event.preventDefault();
  }
});

You Might Be Interested In:

Leave a Reply