precognition icon indicating copy to clipboard operation
precognition copied to clipboard

onValidate callback or async validate (reopen)

Open joncarlson opened this issue 2 years ago • 8 comments

This was opened from #56 which I think was inadvertently closed, as it didn't have a resolution. The linked issues have similar questions which I haven't found an answer to yet.

Following is the text of the original issue. I'd be happy to contribute a PR for this, but would like to know if the proposed solution below is a good one or if there is a plan to handle this.

Because a validate does a roundtrip to the server, it would be nice to know when that roundtrip is finished.

For example, we have a multi-step form. The fields in each step need to be valid before being able to proceed to the next step.

I would think adding a couple options to the .validate(), similar to the .submit(), would be a great addition, something like:

form.validate(id, { onValidated: function(isValid: boolean) {} })

Thank you

joncarlson avatar Jan 06 '24 17:01 joncarlson

This is on our radar and something we plan on adding in the coming month. Will update when I have a PR available.

timacdonald avatar Jan 07 '24 21:01 timacdonald

This is on our radar and something we plan on adding in the coming month. Will update when I have a PR available.

Nice!

mreduar avatar Jan 07 '24 22:01 mreduar

Hello, any news on this?

djurovicigoor avatar Mar 20 '24 17:03 djurovicigoor

Hey folks, I've been working on this one and I'm pretty close to having something I'm happy with.

Something I ran into today is a debouncing issue. We debounce the validate method, so it often returns the same promise. In the following example, if I were to type abcdef into an input field it would run the console log 6 times when the request resolves.

@input="form.validate('name').then(() => console.log('done')"

That feels unexpected to me, so I'm investigating some other solutions, such as Awesome Debounce Promise which allows you to debounce with a promise but only keep the lastest "thenables" called against the promise.

If anyone has any thoughts on that, I'm open to suggestions, otherwise I'll keep digging in that direction.

timacdonald avatar Mar 21 '24 04:03 timacdonald

If anyone has any thoughts on that, I'm open to suggestions, otherwise I'll keep digging in that direction.

Since I use vue I usually useDebounceFn and useThrottleFn in cases like that. Although Lodash debounce is almost the same, I like to use the vueuse ones better. Maybe they can give you a clue on how to solve your problem even without any dependency.

mreduar avatar Mar 21 '24 04:03 mreduar

Got a working version of this I'm happy with (without any packages).

Should have a complete PR up on Monday and would love feedback and testing from anyone interested.

timacdonald avatar Mar 22 '24 06:03 timacdonald

Hey! Any news on this?

djurovicigoor avatar Apr 15 '24 11:04 djurovicigoor

Lots of action over here: https://github.com/laravel/precognition/pull/69

timacdonald avatar Apr 16 '24 00:04 timacdonald

I'm going to close this one and we can follow #69. I'm in the testing phase on this PR to ensure it does exactly what we need.

Thanks for your patience on this one. Required me to rethink how Precognition worked a bit to make it really seamless.

timacdonald avatar Jun 04 '24 01:06 timacdonald

Opened for review: https://github.com/laravel/precognition/pull/69

timacdonald avatar Aug 14 '24 00:08 timacdonald

Merged and tagged.

<TextInput
    v-model="form.name"
    @change="form.validate('name', {
        onSuccess: () => /* ... */,
        onValidationError: () => /* .. */,
    })"
/>

timacdonald avatar Aug 21 '24 23:08 timacdonald