jeck-form

Lightweight form validation and change tracker to build fast & great form experience for your users

Install

yarn add jeck-form

Usage

It only supports one-level object structure.

Main usage

Base

import JeckForm from "jeck-form";

// Data from my database
const person = {
  name: "Erin Lindford",
  age: 27,
  isInvited: false,
};

const personFormConfig = {
  name: {
    // required: ,
    type: String
  },
  age: {
    type: Number
  },
  isInvited: {
    type: Boolean,
    default: false,
  },
};

const personForm = new JeckForm(personFormConfig, person);

Changes

personForm.$changed(); // false

personForm.age = 32;
personForm.isInvited = true;

personForm.$changed(); // true
personForm.$changed("age"); // true
personForm.$changed("name"); // false

Reset

personForm.age = 32;
personForm.isInvited = true;

// Reset form key
personForm.$reset("age");
personForm.$changed("age"); // false
personForm.$changed("isInvited"); // true

// Reset form to initial values
personForm.$reset();
personForm.$changed(); // false
personForm.age; // 27

Apply: Modified values replace initial values

personForm.age = 32;
personForm.isInvited = true;

// New values replace initial values
personForm.$apply();

personForm.$changed(); // false

Get data

personForm.isInvited = true;
personForm.$getData()
/*
{
  name: "Erin Lindford",
  age: 27,
  isInvited: true
}
*/

Validation

personForm.$valid()
personForm.$valid('name')

Usage 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

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

Author

jeck-form © matschik, Released under the MIT License.

GitHub @matschik · Twitter @matschik_