JosephusPaye / Keen-UI

A lightweight Vue.js UI library with a simple API, inspired by Google's Material Design.
https://josephuspaye.github.io/Keen-UI/
MIT License
4.1k stars 438 forks source link

Support registering custom validation rules #143

Closed inoc603 closed 7 years ago

inoc603 commented 8 years ago

I found validatorjs has a nice custom validation function here, but I've failed to use it with ui-textbox.

import Validator from 'validatorjs'

// Before create vue instance and Vue.use(Keen)

// Tried both, none works
Validator.register('custom', function() { return false }, 'failed')
Validator.registerAsync('custom', function(v, req, attr, passes) { passes(false, 'failed') })
<template>
    <ui-textbox name="test" label="test" validation-rules="custom"
    ></ui-textbox>
</template>

I got the following error:

keen-ui.js:6244 Uncaught TypeError: Cannot read property 'apply' of undefined
validate @ keen-ui.js:6244
check @ keen-ui.js:5621
passes @ keen-ui.js:5867
validate @ keen-ui.js:5540
(anonymous function) @ vue.common.js:216
blurred @ keen-ui.js:13220
(anonymous function) @ vue.common.js:216

It seems that keen-ui uses the validatorjs packed with itself, maybe that's why my registration didn't work? Is there anyway to solve this?

THX

demsey2 commented 8 years ago

I have the same problem, I think keen-ui shouldn't include its dependencies in dist package.

My solution for now is a copy of keen-ui.js with a new custom validation rule. You still need the same custom rule registered with Validator instance if you want to call validation (check, passess etc)

JosephusPaye commented 8 years ago

Good suggestion, I will look into this for v1.0.

JosephusPaye commented 7 years ago

Fixed in v1.0. Validation is now done externally from outside the components (meaning Keen UI no longer bundles validator-js), and set using the invalid and error props.