input-validation-next

v0.1.8

Published

10 months ago

Simple, lightweight form validation without jQuery

Downloads

0High
0Medium
0Low

visual_yuki

validation validate form input form validation

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

Published

Vulnerabilities

Links

Maintainers

Keywords