Core classes and design
The DataEntry library is designed to clearly separate functions that do business logic from classes that read / write values and mark fields as valid or invalid. Below schema shows the relation between classes defined in the library. The word field here is used as a synonym of "property" and is conceptually abstracted from HTML elements.
DataEntry, Validator and Formatter are core classes, providing Promise based validation of forms and fields, logic to format values and localize error messages. These classes are abstracted from DOM manipulation and must be coupled with other classes that implement methods to retrieve and set values from a source, and decorate objects with validation state. Since they are abstracted from DOM chores, these classes are suitable for web servers and desktop applications (Electron) implemented using Node.js. When used for client side web application code, the library offers built-in classes that handle DOM manipulation and other classes that operate on objects in memory (later called "context classes").
| Class | Description |
|---|---|
| DataEntry | Coordinates validation, formatting and decoration of fields |
| Validator | Provides methods to validate fields using validation chains and sets of rules |
| Formatter | Provides methods to format values using sets of rules |
The Localizer interface is used to implement localization of error messages. Refer to the dedicated wiki page for more information.
Classes that provide built-in features that involve DOM manipulation, such as:
- automatic decoration of valid and invalid fields with CSS classes and information displayed using HTML elements
- automatic event handlers for validation of fields, on blur event
- formatting of values on focus (before the user starts editing, such as removing leading zeroes from zero-filled values during editing)
- constraints on keypress, to disallow certain kinds of input
- validation criteria described in schema objects are applied to HTML elements by matching
nameattribute.
| Class | Description |
|---|---|
| DomHarvester | Gets and sets values through DOM manipulations |
| DomDecorator | Decorator |
| DomBinder | Built-in event handlers |
Classes that provide built-in features to read and write values and store validation results inside objects, in-memory.
| Class | Description |
|---|---|
| ContextHarvester | Gets and sets values inside objects |
| ContextDecorator | Sets validation results inside objects |
Programmers who prefer to let other frameworks handle DOM manipulation (such as Vue.js, React or Knockout) should either:
- use only core classes and implement their own classes for decorator and marker
- or, evaluate and try to use the built-in
dataentry-context.jsfile.
While programmers who don't mind having the library handling DOM manipulation and setting event handlers, can use built-in classes involving DOM manipulation. These built-in methods take care of many chores, such as firing validation of fields on blur, decorating HTML elements according to their state. Built-in classes support proper disposing of resources, removing event handlers and references to objects as necessary, and can be integrated with any framework.
The React demo
- provided at https://github.com/RobertoPrevato/DataEntry-React
- and testable at: https://robertoprevato.github.io/demos/dataentry/index.html
demonstrates that DataEntry can be used with React and similar libraries / frameworks.