Giter VIP home page Giter VIP logo

dataentry's Introduction

DataEntry

Forms validation library that implements Promise based validation of fields and forms, automatic decoration of fields, localized error messages. The library has no dependency on other libraries and can be integrated with frameworks such as React, Vue.js, Aurelia, Knockout, Angular, etc.

Objectives

The objectives of the DataEntry library are:

  • to enable the implementation of application-wide validation strategy: centralizing the logic that displays error messages, marks fields in valid or invalid state, and applies validation and formatting rules
  • to simplify the implementation of fields validation in new applications
  • to simplify the definition of asynchronous validation rules (for example, rules involving AJAX requests)
  • to provide a simple way to define new validation and formatting rules

Features

  • ES6 source code
  • Unit tested source code
  • Promise based validation of fields and forms
  • automatic decoration of fields (valid state, invalid state, neutral)
  • logic to define validation rules
  • logic to define formatting rules
  • logic to apply pre-formatting rules (formatting to be applied upon field focus)
  • logic to define constraints (disallow certain inputs, e.g. only positive integer values, only letters, .etc)
  • support for validation triggers between fields
  • good documentation, in GitHub wiki
  • raised exceptions include a link to GitHub wiki, with instructions on how they can be resolved

What DataEntry is not

DataEntry is not a templating engine. It doesn't create HTML forms, nor populates the values of HTML input elements with values read from objects. DataEntry is only concerned with validation, which can be of objects in memory, or HTML elements. In the latter case, whether the HTML of a form is generated using a server side engine, or the templating engine of client side libraries or frameworks, DataEntry can be used to validate the values of these forms. The only exception is formatting of values inside input fields: DataEntry has built-in features to automatically format values after successful validation (this feature can be turned off as desired), which is a simple case to handle.

Design

The library is designed to clearly separate functions that do business logic from classes that read / write values and mark fields as valid or invalid. See Core classes and design for more information.

Validation schema

In DataEntry, the validation of a group of fields is a promise, composed of validation chains (one for each field defined in the dataentry schema object). Each validation chain is a promise that completes when either the first validation rule fails (resolved with error result or rejected), or all validation rules succeed. This way, every field can have asynchronous methods as part of their validation and all errors are populated at once (the first error for each field). If AJAX requests are necessary to validate certain fields, they can and should be executed after synchronous validation that may happen on the client side, to avoid AJAX requests for a value that it's already known to be invalid.

Validation and chains

Use downloading distribution files

DataEntry library can be used downloading and using distribution files, in distribution folder.

<script src="dataentry.js"></script>

Install using npm

DataEntry library can be installed using npm.

npm install dataentry

Modules can then be imported using CommonJS syntax:

var DataEntry = require("dataentry")
var DataEntryDom = require("dataentry/dom")
// var DataEntryContext = require("dataentry/context")

Or ES6 import syntax:

import DataEntry from "dataentry"
import DataEntryDom from "dataentry/dom"

// example of configuration to use built-int methods for DOM manipulation:
DataEntry.configure({
  marker: DataEntryDom.DomMarker,
  harvester: DataEntryDom.DomHarvester,
  binder: DataEntryDom.DomBinder
})

Example using built-in methods completely abstracted from DOM manipulation:

import DataEntry from "dataentry"
import DataEntryContext from "dataentry/context"

// example of configuration to use built-int methods without DOM manipulation:
DataEntry.configure({
  marker: DataEntryContext.ContextMarker,
  harvester: DataEntryContext.ContextHarvester
})

For more information

Refer to the rich documentation in GitHub wiki.

dataentry's People

Contributors

robertoprevato avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

dataentry's Issues

IE11: error when firing change event

IE11: dispatchEvent causes "Object doesn't support this action" error.

SCRIPT445: Object doesn't support this action
el.dispatchEvent(new Event("change"), { forced: true });

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.