Custom HTML5 Form Validation Library – Ok.js

Category: Form , Javascript | July 6, 2018
Views Total:1,413 views
Official Page:Go to website
Last Update:July 6, 2018


Custom HTML5 Form Validation Library – Ok.js


Ok.js is a lightweight JavaScript form validation library that makes it easy to create custom validation rules and error messages to form fields.

Basic usage:

Include the ‘Ok.js’ library on the webpage and you’re ready to go.

<script src="ok.js"></script>

Add custom validator names to your form fields using ‘data-ok’ attribute as follows:

<form class="form">
    <label for="inputNameFirst">First Name (only "Dave" allowed)</label>
    <input type="text" id="inputNameFirst" placeholder="Enter First Name" required data-ok="nameFirst">
    <label for="inputNameLast">Last Name</label>
    <input type="text" id="inputNameLast" placeholder="Enter Last Name" required>
    <label for="inputMail">Email address (only ".de" allowed)</label>
    <input type="email" id="inputMail" placeholder="Enter email" required data-ok="emailDe">
  <input type="submit">

Create a new OK object and define your own validation rules & error messages:

  el: ".form",
  validators: {
    nameFirst: {
      msg: "only 'Dave' allowed",
      fn: val => {
          return val.toLowerCase() === "dave";
    emailDe: {
      msg: "Please input your .de email",
      fn: val => {
          return val.endsWith(".de");


v3.4.0 (07/06/2018)

  • feat: Added support for legacy browsers not supporting the validation API

v3.3.2 (06/24/2018)

  • Updated

You Might Be Interested In:

Leave a Reply