formaggino
v1.0.1
Published
A small vanilla js library for validate your forms
Downloads
1
Readme
🧀 Formaggino
A small vanilla js library for validate your forms without external dependencies
Getting started
Install the package
npm install formaggino
Initialize the library
import Formaggino from "formaggino";
const formaggino = new Formaggino();
Create a form remember to include method
, action
and novalidate
on your form
<form
method="POST"
id="form"
action="https://your-action.io/sendform"
novalidate
>
<input name="name" type="text" required />
<span class="form-error">Your error text</span>
...
<div class="form-report-error">error</div>
<div class="form-report-success">success</div>
<span class="form-loading"> loading... </span>
<button type="submit">submit</button>
</form>
call the submitEvent
method
formaggino.submitEvent("#form");
or use the options
formaggino.submitEvent("#form"{
mode: 'json',
loadingClass: 'your-loading__custom_class',
closingTimint: 8000
...
});
don't forget to set you css
.form-error,
.invalid-feedback,
.form-loading,
.form-report-error,
.form-report-success {
display: none;
}
.active {
display: block;
}
Options
| Option | Type | Default | Description |
| :------------ | :-----: | :-------------------- | ------------------------------------------------------------------ |
| mode | string | form-data
| the type of data to send to fetch request, you can also use json
|
| loadingClass | string | form-loading
| the css class for loading element |
| errorClass | string | form-error
| the css class for each single field of form |
| formSuccess | string | form-report-success
| the css class for form success element |
| formError | string | form-report-error
| the css class for form error element |
| closingTiming | integer | 3000
| timeout for form report duration |
| listener | string | change
| the event listener for each single field in form |
Contributing
Build for development
- Having all the dependencies installed run
npm run dev
. This command will generateUMD
(unminified),CommonJS
andESM
modules under thedist
folder. It will also watch for changes in source files to recompile.
Build for production
- Having all the dependencies installed run
npm run build
. This command will generate the same modules as above and one extra minifiedUMD
bundle for usage in browser.
Scripts
npm run build
- Produces production version of library modules underdist
folder.npm run dev
- Produces a development version of library and runs a watcher to watch for changes.npm run test
- Runs the tests.npm run lint
- Lints the source code with ESlint.npm run prepare
- Run both BEFORE the package is packed and published, on local npm install without any arguments, and when installing git dependencies.npm run clean
- Deletesdist
andcoverage
folders.npm run serve
- serve the index.html with http-server