https://github.com/nju33/efo
Good form? To make
https://github.com/nju33/efo
form input library pure-javascript textarea
Last synced: 5 months ago
JSON representation
Good form? To make
- Host: GitHub
- URL: https://github.com/nju33/efo
- Owner: nju33
- License: mit
- Created: 2017-03-24T05:38:26.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-03-24T05:45:25.000Z (about 9 years ago)
- Last Synced: 2025-01-23T00:14:48.242Z (over 1 year ago)
- Topics: form, input, library, pure-javascript, textarea
- Language: HTML
- Homepage: https://www.npmjs.com/package/efo
- Size: 1.37 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Efo
Good form? To make
## Install or Download
```sh
yarn add efo
npm i -S efo
```
Or access to [releases page](https://github.com/nju33/efo/releases).
Then, download the latest version.
## Usage
First, if you read as a separate file
```html
```
Several new attributes will appear.
- `data-efo-name`
This will be the name of the input part.
This can be substituted for name originally in ``. This is used when you want to add a name to more than one ``.
- `data-efo-error-class`
When an error occurs in the validation of the input form, add `.efo-error`. Also, when solving it add `.efo-resolved`.
- `data-efo-error-message`
Inserts an error message in `innerText` of the element set on error.
- `data-efo-set-default-height`
In error, specify the height of `clientHeight` in style with the element with that value. This can be used to apply the `transition` of CSS when `.efo-error` is gone and the height returns.
```html
Name
Adress
-
```
`efo.validate` checks all elements. Returns a `Boolean`.
```js
const efo = new Efo({
target: document.getElementById('form'),
data: {
// When solving the error, keep `.efo-error` 300ms
leaveTransitionSec: 300,
// key: string
// Name `data-efo-name` or` name`
//
// value: (el1: HTMLElement, el2: HTMLElement, ...): [bool, string]
// Elements with that name are all passed.
// The return value is
// - Pass validation?
// - Error message
tests: {
name(el) {
if (el.value.length >= 3) {
return [true];
}
return [false, 'Three or more characters are required'];
},
address(el1, el2) {
const val = el1.value + '-' + el2.value;
const re = /^\d{3}-\d{4}/;
if (re.test(val)) {
return [true];
}
return [false, 'Invalid address'];
},
}
}
});
document.getElementById('submit-button').addEventListener('click', ev => {
ev.preventDefault();
// `Scroll` means to scroll to the very first error element on error.
const bool = efo.validate({scroll: true});
if (bool) {
form.submit();
}
});
```
### Example
- `test/fixtures/index.js`
- `example/webpack/index.js`
## LICENSE
The MIT License (MIT)
Copyright (c) 2017 nju33