Basic Form Validation JavaScript Library – dakrajs

Preview:

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