validateAfterLeaveOrPressedEnter?

[ericpyle]

I'm a little confused by the current field validation options.

There is validateAfterLoad, and validateAfterChanged (as user types).

How can I validate a field only after a user leaves the control or presses enter (which I believe is the typical way that field validators work?) I don't really want to bother the user that what they are typing is invalid until they are finished typing it and ready to move on.

Thanks for any help!

[ericpyle]

OR if I asynchronously validate a text box as the user types (after each change), how do I cancel all but the last validation when the user stops typing?

I want to avoid getting multiple errors as the user types (just care about the final one--which may come back earlier than others)

[ericpyle]

Perhaps there is a way for vfg to integrate https://lodash.com/docs#debounce for text inputs ?

[icebob]

You should integrate debounce to your async validator.

[ericpyle]

@icebob thanks for that suggestion. The examples I had seen with debouncer were trying to control data, but using it to just control the validation should work.

[ericpyle]

@icebob having some success, but not quite with _debounce(). Now the error message does not get reported until after I start typing a second time. Is the _debounce() promise not quite what you expected or am I doing something not right?

validator: _.debounce(async function(value, field, model){
                            try {
                                var response = await remote.get(`/validate/${value}`);
                                console.log(response);
                            } catch (error) {
                                console.log(error);
                                return [error.responseJSON.error_message];
                            } finally{
                                this.$root.validating = false;
                            }
                            return [];
                        }, 500)

After typing 123456, I hit a breakpoint in my debounce callback, and it returns [error_message]

However, I don't see the error message until I start typing again (e.g. "22")

[ericpyle]

Not sure it matters, but the first time I type 123456, my onValidated() gets called 6 times with isValid set to true.

methods: {
            onValidated(isValid, errors) {
                console.log("Validation result: ", isValid, ", Errors:", errors);
            },

Then the next time I type "2", I get two onValidated calls, the first one isValid is true, the last one is false.

[icebob]

Would be good a jsFiddle with this issue in order to we can investigate it.

[ericpyle]

@icebob here's a jsFiddle to reproduce the issue
https://jsfiddle.net/ericpyle/rnsgn2ng/

[icebob]

Great, thanks!

[ericpyle]

Thanks, @icebob

Also wanted to report that sometimes I still get multiple errors:

[Alex-Sokolov]

That's really needed. Now typing every char will start validation and UI freeze for some time if typing word fast

[icebob]

Hi @ericpyle,
I tested and it seems vfg validation can't work properly with lodash debounce. :(

[icebob]

I started to add debouncing to vfg in validation process. I think it will solve your problem.
Fiddle

[ericpyle]

@icebob yes that seems to work just fine and I no longer see multiple errors being reported. how do you recommend I get a version of vfg with the fix?

[icebob]

This week I will make a new release.

[ericpyle]

@icebob thanks

[icebob]

Released in v2.1.1