semisleep / simple-vue-validator

A simple yet flexible validator library for vue.js
MIT License
293 stars 28 forks source link

Callback is not a function error when using custom rule from imported function #39

Closed Firman95 closed 6 years ago

Firman95 commented 6 years ago

This is my validator

import propNameExistValidation from '../../../validators/checkPropertyNameExist';

...

    validators: {
            'propertyName,propertyUuid':{
                debounce: 500, // in milliseconds
                validator: function (propertyName,propUuid) {
                     return Validator.value(propertyName)
                           .required()
                           .custom(propNameExistValidation(propertyName,propUuid));
                }
            }
        },

And this is my propNameExistValidation.js

export default function propNameExistValidation(propertyName,propertyUuid) {
    console.log(propertyName,propertyUuid);
    if (!Validator.isEmpty(propertyName)) {
        return axios.post('/myApi', {
            property_name: propertyName,
            propertyUuid:propertyUuid
        }).then((response) => {
            let valid = (response.data.valid == 'true');
            if(!valid){
                return Vue.i18n.translate('errors.propertyNameExist');
            }
        });
    }
};

EDIT: If i use function directly inside custom parameter, it works just fine.

validators: {
            'propertyName,propertyUuid':{
                debounce: 500, // in milliseconds
                validator: function (propertyName,propUuid) {
                    return Validator.value(propertyName)
                         .required()
                         .custom(function (propertyName,propUuid) {
                             return axios.post('/myApi', {
                                 property_name: propertyName,
                                 propertyUuid:propUuid
                             }).then((response) => {
                                 // return response.data.valid;
                                 let valid = (response.data.valid == 'true');
                                 if(!valid){
                                    return Vue.i18n.translate('errors.propertyNameExist');
                                 }
                             });
                    });
                }
            }
        },
semisleep commented 6 years ago

The problem is you didn't pass the function, instead you called the function directly:

                     return Validator.value(propertyName)
                           .required()
                           .custom(propNameExistValidation(propertyName,propUuid));

Should be changed to:

                     return Validator.value(propertyName)
                           .required()
                           .custom(propNameExistValidation);
Firman95 commented 6 years ago

But I can not pass parameter to the custom rule that way. This is what i do. In the custom rule, I return function, instead of validation result value:

import {Validator} from  'simple-vue-validator';
let propertyName,propertyUuid;
let fn = function () {
    if (!Validator.isEmpty(propertyName)) {
        return axios.post('/myApi', {
            property_name: propertyName,
            propertyUuid: propertyUuid
        }).then((response) => {
            let valid = (response.data.valid == 'true');
            if (!valid) {
                return Vue.i18n.translate('errors.propertyNameExist');
            }
        });
    }
}
export default function propNameExistValidation(propertyName_,propertyUuid_) {
    propertyName = propertyName_;
    propertyUuid = propertyUuid_;
    return fn;
};

And the validator stays the same:

return Validator.value(propertyName)
                           .required()
                           .custom(propNameExistValidation(propertyName,propUuid));