ractive-validate's Introduction

Ractive.js form data model validation.

Based off initial investigation into existing libraries like Ractive Validator and Foundation Abide

The Problem

DOM manipulation style libraries (Abide) work terribly with reactive templating, and cause headaches. Data validation is the better approach, and aligns well with reactive templating approach.

The Solution

When you define your widget in JavaScript, in the constructor you do this: Create instance of RactiveValidate, passing the reactive widget instance (to get data from using Ractive Keypaths) AND a validation definition.

self.validation = new RactiveValidate(self.ractive, {
    'fieldKeypath': {
        required: 'Please enter the account name',
        alpha: 'Please enter a valid name',
        someCustomRuleIMadeUp: 'You obey this rule!',
        minlength: {
            param: 1,
            message: 'Please enter minimum of 1 characters'
        },
        maxlength: {
        	param: 5,
        	message: 'Please enter maximum of 5 characters'
        }
    }
});

Allow for custom validation rules for this specific widget.

_.extend(self.validation.patterns, {
    someCustomRuleIMadeUp: function (data) {
        // Your code here
        return someBooleanResult;
    }
});

Recommend Projects