0.1.11 • Published 6 years ago
form-pure v0.1.11
FormPure JavaScript component
Installation
NPM
npm i form-pure --saveYarn
yarn add form-pureCDN
<script src="https://unpkg.com/form-pure@latest/lib/form-pure.min.js"></script>Usage
import FormPure from "form-pure";
new FormPure(element, config);
`element` // Required. Either selector or HTML node.
`config` // Required. Configuration object.Configuration
| Property | Required | Type | Description |
|---|---|---|---|
| fields | true | Array | Array of fields for the form. Each field element contains type, and attributes. |
| form | false | Object | General configuration of the form. Contains inputWrapper and attributes properties. |
| i18n | false | Object | Internalisation object with transition for error messages. |
| onSubmit | false | Function | Callback that will be fired on form submit. Returns object with form values. |
| fields[].type | true | String | Tagname of the field. Example: input, button, textarea. |
| fields[].attributes | true | Object | Object of attributes that will be applied to the field. Example: name, placeholder, type, id. Field name is required. |
| fields[].label | false | String | Content for label. |
| fields[].icon | false | String | If specified - <i></i> will be inserted in the inputWrapper. |
| fields[].onChange | false | Function | Fires on input event. Returns current value of the field. In case of input with type file, returns current FileList. |
| form[].inputWrapper | false | Object | Configuration of the possible wrapper element for field. Contains type and attributes. By default field won't be wrapped. |
| form[].attributes | false | Object | Object of attributes that will be applied to the form. Example: class, id. |
i18n error codes
| Error code | Default value | Description |
|---|---|---|
| valueMissing | Value is missing | Shown when value is missing for the required field. |
Example
const form = new FormPure(".form-wrapper", {
fields: [
{
type: "input",
attributes: {
name: "name",
placeholder: "Name",
type: "text",
id: "name",
class: "custom-input",
required: true,
},
},
{
type: "button",
attributes: {
type: "submit",
textContent: "Send",
id: "send",
class: "custom-button",
},
},
],
form: {
inputWrapper: {
type: "div",
attributes: {
class: "custom-input-wrapper",
},
},
attributes: {
id: "form",
class: "custom-form",
},
},
i18n: {
valueMissing: "Value is missing",
},
onSubmit: () => {},
});Structure
form-pure/
└── lib/
└── form-pure.min.jsLicense
MIT