This repository is standalone version of jquery.inputfollow.js, and updated some of functions.
- Required
- Number
- Code (Number or "-" or "+" or "*")
- Number
- Code
$ npm install inputfollow.jsimport { InputFollow } from 'inputfollow.js'
InputFollow(...);<script src="path/to/inputfollow.js"></script>
<script>
InputFollow(...);
</script>You can get from source code from here.
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' },
},
},
],
},
],
})
}| 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 |
| 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 |
| Parameter | Type | Default | Description |
|---|---|---|---|
| name | string |
Target field name | |
| limit? | "number" or "code" | Limitation rule | |
| validation? | ValidationOption or ValidationOption[] |
Validation rule settings |
| 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 |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent