inputfollow.js
v0.0.8
Published
Input Validate, Input Limit etc.
Downloads
29
Readme
inputfollow.js
This repository is standalone version of jquery.inputfollow.js, and updated some of functions.
Validate
- [x] Required
- [x] E-mail
- [x] Number
- [x] Code (Number or "-" or "+" or "*")
Limit
- [x] Number
- [x] Code
Demo
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 | Default | 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 |