jeck-form
Lightweight form validation and change tracker to build fast & great form experience for your users
Install
yarn add jeck-formUsage
It only supports one-level object structure.
Main usage
Base
; // Data from my databaseconst person = name: "Erin Lindford" age: 27 isInvited: false; const personFormConfig = name: // required: , type: String age: type: Number isInvited: type: Boolean default: false ; const personForm = personFormConfig person;Changes
personForm; // false personFormage = 32;personFormisInvited = true; personForm; // truepersonForm; // truepersonForm; // falseReset
personFormage = 32;personFormisInvited = true; // Reset form keypersonForm;personForm; // falsepersonForm; // true // Reset form to initial valuespersonForm;personForm; // falsepersonFormage; // 27Apply: Modified values replace initial values
personFormage = 32;personFormisInvited = true; // New values replace initial valuespersonForm; personForm; // falseGet data
personFormisInvited = true;personForm/*{ name: "Erin Lindford", age: 27, isInvited: true}*/Validation
personFormpersonFormUsage example in VueJS
<template> <h1>Edit person</h1> <label></label> <input /> <button :disabled="!personForm.$changed()">Save modifications</button></template> <script>import JeckForm from "jeck-form"; export default { async created() { this.person = await this.fetchPerson(); this.personForm = new JeckForm(this.personFormConfig, this.person); this.person.id; // 1234 this.personForm.id; // undefined this.personForm.name; // Erin Lindford }, data() { return { person: null, personForm: null, personFormConfig: { name: { required: true, type: String }, age: { type: Number, }, isInvited: { type: Boolean, default: false }, }, }; }, methods: { fetchPerson() { return { id: 1234, name: "Erin Lindford", age: 27, isInvited: false, }; }, },};</script>Usage example in Svelte
Contributing
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature - Commit your changes:
git commit -am 'Add some feature' - Push to the branch:
git push origin my-new-feature - Submit a pull request :D
Author
jeck-form © matschik, Released under the MIT License.
GitHub @matschik · Twitter @matschik_