Inputfollow.js NPM

inputfollow.js

This repository is standalone version of jquery.inputfollow.js, and updated some of functions.

Validate

Required
E-mail
Number
Code (Number or "-" or "+" or "*")

Limit

Number
Code

Demo

Demo is here

Usage

Using from npm

$ npm install inputfollow.js

import { InputFollow } from 'inputfollow.js'

InputFollow(...);

Using from script

<script src="path/to/inputfollow.js"></script>
<script>
    InputFollow(...);
</script>

You can get from source code from here.

Option example

const formEl = document.querySelector('#form')

if (formEl) {
    InputFollow(formEl, {
        submit_button: '#submit',
        rules: [
            {
                name: 'name',
                validation: [
                    {
                        type: 'required',
                        message: 'Name is required',
                    },
                ],
            },
            {
                name: 'name2',
                validation: [
                    {
                        type: 'required',
                        message: 'Name2 is required',
                    },
                ],
            },
            {
                name: 'email',
                validation: [
                    {
                        type: 'required',
                        message: 'E-mail is required',
                    },
                    {
                        type: 'email',
                        message: 'E-mail is not Email format',
                    },
                ],
            },
            {
                name: 'number',
                limit: 'number',
                validation: [
                    {
                        type: 'number',
                        message: 'Number must be numeric',
                    },
                ],
            },
            {
                name: 'code',
                limit: 'code',
                validation: [
                    {
                        type: 'code',
                        message: 'Code must be numeric or "-" or "+"',
                    },
                ],
            },
            {
                name: 'textarea',
                validation: [
                    {
                        type: 'required',
                        message: 'Textarea is required',
                    },
                ],
            },
            {
                name: 'orreq01',
                validation: [
                    {
                        type: 'required',
                        message: 'Input "or required" 01 is required',
                        mode: 'or',
                        with: { orreq02: 'required' },
                    },
                ],
            },
            {
                name: 'andreq01',
                validation: [
                    {
                        type: 'required',
                        message: 'Input "and required" 01 is required',
                        mode: 'and',
                        with: { andreq02: 'required' },
                    },
                ],
            },
            {
                name: 'checkbox',
                validation: [
                    {
                        type: 'required',
                        message: 'Check boxes is required',
                    },
                ],
            },
            {
                name: 'if_target',
                validation: [
                    {
                        type: 'required',
                        message:
                            "If condition's text field is required if If check this is checked",
                        if: {
                            mode: 'and',
                            target: { if_from: 'checked' },
                        },
                    },
                ],
            },
        ],
    })
}

Parameters

InputFollow(formEl, options)

Parameter	Type	Default	Description
formEl	`string` or `HTMLFormElement`		Specified Form Element, will validate or limit under this element fields
options	InitialParam		Target fields and validation/limitation rules

Initial param

Parameter	Type	Default	Description
rules	Rule[]		Validation and Limitation rules
error_class?	`string`	"has-error"	The class name for input fields when error happened
error_message_class?	`string`	"inputfollow-error"	The class name for message content
empty_error_message_class?	`string`	"is-empty"	The class name for message content when there is no error
valid_class?	`string`	"is-valid"	The class name for input fields when valid value
initial_error_view?	`boolean`	false	If you put `true`, the error state/message will show when page loaded
submit_button?	`string` or `HTMLInputElement` or `HTMLButtonElement`		If there is error field, the specified element added `disabled` attribute
on_validate?	`() => void`		Will be called when validate method is run
on_success?	`() => void`		Will be called when all fields are valid
on_error?	`(errors: Record<string,`ValidatedError`[]>) => void`		Will be called when there is error field

Rule param

Parameter	Type	Description
name	`string`	Target field name
limit?	"number" or "code"	Limitation rule
validation?	ValidationOption or `ValidationOption[]`	Validation rule settings

Validation option param

Parameter	Type	Default	Description
type	"number" or "required" or "email" or "code"		Validation type
mode?	"or" or "and"	"and"	Multiple fileds checking mode, "or" is will check one of fields, "and" is will check all the fields
with?	`Record<string, "number" or "required" or "email" or "code">`		Multiple fields target, e.g. `with: { field_name: 'required' }`
if?	`{ mode: "or" or "and", target: Record<string, string> }`		Relating other fields condition setting, e.g. `if: { mode: 'and', target: { field_name: 'value' } }` will validate when `field_name` value is "value"
message?	string		Error message