Newton's Preposterous Miscalculation

    @apatheticwes/validator

    0.1.3 • Public • Published

    Validator

    A simple and extendable client-side form Validator.

    Overview

    This a simple, extensible client-side validation class. It's "simple" because it includes only a small and basic set of validation functions. However, it's easily extensible so you may add your own types of custom validation.

    While most other Validators require a particular accompanying Javascript framework, this one does not. Additionally, rather than a bloaty, full-featured validator, the approach taken herein is to create a basic validator that covers most general use-cases. If it doesn't cover yours, you can easily add any required functionality.

    Getting Started

    • with npm: npm install @apathetic/validator
    • with git: git clone git@github.com:apathetic/validator.git

    There is an ES6 module you may consume however you wish. Then:

    Check a form

    var form = document.querySelector('#userForm');
    var valid = Validator.check(form);

    Check a field

    var field = document.querySelector('#email');
    var valid = Validator.check(field);
    <input id="email" name="email" data-validate="email" required />

    Add a custom rule

    // add a rule called "count" that checks an input's length
    Validator.updateRule('count', function count(val) {
      return val.length <= 40;
    });
    <textarea data-validate="count" required>40 characters or less, here</textarea>

    Methods

    | method | args | description | | ------ | ----------- | | check() | element (HTMLElement), success (Function) | Pass in a field or a DOM fragment. Checks if field (or fields within the fragment) are valid according to any data-validate/required attributes | | updateRule() | name (String), validator (Function) | Add your own validation function. The validation function receives the field value to check against. Use your new rule by placing data-validate="name" on a field |

    Demo

    After cloning the repo:

    npm i
    npm start
    

    A server will spin up at http://localhost:8080, where you may play with the various examples.

    Support

    • IE9+
    • Safari / Chrome
    • Firefox
    • iOS
    • Android 4.0+

    Examples

    Please see the test / demo directory

    Release History

    0.1

    • first release

    Keywords

    Install

    npm i @apatheticwes/validator

    DownloadsWeekly Downloads

    5

    Version

    0.1.3

    License

    MIT

    Last publish

    Collaborators

    • apatheticwes