A Tiny TypeScript Library For HTML Form Validation | Ok.js

Ok.js is a tool library for form validation with more than HTML5 that makes features include custom messages and checker validator chaining/sequences.

form validation javascript, html form validation, javascript form validation with error message, form validation examples, html custom validation message

How to make use of it:

1. Include the “Ok.js” library on the web page.

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

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

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

3. Create a new OK object and define your validation rules and error messages:

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

custom html5 form validation library, Ok.js plugin/github


See Demo And Download

Official Website(FelixRilling): Click Here

This superior jQuery/javascript plugin is developed by FelixRilling. For extra advanced usage, please go to the official website.

Share