Package Exports

input-validation-next
input-validation-next/dist/input-validation-next.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (input-validation-next) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

DOCUMENTATION

Using NPM

Installing input-validation-next is straightforward, and can be done with npm package manager;

npm install input-validation-next;

After that, import plugin in your code. Required any bundler (webpack, vite, rollup);

import {InputValidationNext, globalInputValidationNext} from "input-validation-next";

Using CDN

Also you can add plugin by cdn direcly in browser without bundler. Add these imports to your html page:

<script src="https://cdn.jsdelivr.net/npm/input-validation-next@latest/dist/input-validation-next.iife.js"></script>

Getting Started

There is InputValidationNext function for plugin initialization.

First argument is form element.
Second argument is config.

let myform = InputValidationNext(document.getElementById("myform"), {
   submitHandler: function (event) {
      console.log(this); // `this` contain many common info.
      console.log(event); // event of form submit
   },
   rules: {
      inputName2: {
         email: true,
      },
   },
   messages: {
      inputName2: "Custom error message for userEmail input.",
   },
});

Plugin support default validation attributes: required, min-length, max-length,

<html>
   <head> </head>
   <body>
      <!-- form tag is required -->
      <form id="myform">
         <div>
            <input type="text" name="inputName1" required min-length="4" />
         </div>
         <div>
            <input type="text" name="inputName2" />
         </div>

         <!-- submit button or submit link is required -->
         <button type="submit">submit form</button>
      </form>
   </body>
</html>

Example in online editor.

Adding rules

You can add local or global validators. For global, there is globalInputValidationNext class with addRule method.

first argument (value) - input value.
second argument (params) - params of rule.
third argument (element) - input node.

For local, you can define inline function direcly in rules. Ex: customName

globalInputValidationNext.addRule(
   "firstUppercaseLetter",
   function (value, params, element) {
      return value[0] === value[0].toUpperCase();
   },
   "First letter is not uppercase"
);

let myform = InputValidationNext(document.getElementById("myform"), {
   submitHandler: function (event) {
      console.log(this);
      console.log(event);
   },
   rules: {
      inputName1: {
         firstUppercaseLetter: true,
      },
      inputName2: {
         customName: (value, params, element) => {
            return value === "Gf56Gj5";
         },
      },
   },
   messages: {
      inputName2: {
         customName: "sdflsdf",
      },
   },
});

<html>
   <head> </head>
   <body>
      <form id="myform">
         <div>
            <input type="text" name="inputName1" />
         </div>
         <div>
            <input type="text" name="inputName2" />
         </div>

         <button type="submit">submit form</button>
      </form>
   </body>
</html>

Example in online editor.

Programming usage

Direcly validate form without submit event.

let myform = InputValidationNext(document.getElementById("myform"), {});

myform.validate();

Is form valid or not?.

let myform = InputValidationNext(document.getElementById("myform"), {});

myform.isValidForm();