@@crazy_coder // ----------- replace this ----------- export default { setup(){ // code here return {} } } // ----------- with this ----------- // code here
This isn't actually using the Composition API as you're still mixing in the Options API with the methods object and referencing 'this', at best this is a mix of both APIs. For reference, anyone using the Composition API. Create either a normal constant or a computed property with the object you want for your validation (see example below). Then you can use the touch() method to run the validator, or run the validate method: const rules = { credentials: { username: { required }, email: { required, email }, password: { required }, }, } const v$ = useVuelidate(rules, store) // Here I'm just referencing my Pinia store which is using reactive objects. Inside my function I run: const isFormCorrect = await v$.value.$validate() and then check for errors: if (!isFormCorrect) return Do you checking here, else run function.
Great tutorial! but i cannot access v$.. when i print {{ v$ }} i got the following array of data => { "$dirty": false, "$path": "__root", "$model": null, "$error": false, "$errors": [], "$invalid": false, "$anyDirty": false, "$pending": false, "$silentErrors": [] }.. their is no v$.email or something else.. i checked the code several times.. i have exakt the same code Edit: in my case it only work with "this.v$.email.$error" and "this.v$.email.email.$message".. i'm wondering, because i return v$: useValidate() in ma data function.
Vuelidate documentation is difficult to understand, so.. can i still get and show error messages with VUE 3 without using the Composition API shown in the video? Also, How to create custom regex validator and use it? It is confusing.. I tried.. still trying.
try the helpers.regex method (vuelidate-next.netlify.app/custom_validators.html#regex-based-validator) and to make sure your regular expression is doing what i want, i use this tool a ton! regexr.com/
@@LearnVue thank you for the useful links! Since I need to get things done I chose to do the validation without Vuelidate. Maybe I will come back to the documentation in the near future :)
Great question! Computed is only needed if your rules are accessing a reactive value, like in the example from the video. This is the part of the docs that use that reactive and computed: vuelidate-next.netlify.app/advanced_usage.html#using-reactive-state.
nice one but can i see how to handle Strong passwords need to have a letter, a number, a special character, and be more than 8 characters long. for password validation
for that, you can use Vuelidate's minLength to make sure it's longer than 8 characters. And then use a custom validator to check for a letter, number, and special character. You can use a regular expression and this is the documentation for the custom validations: vuelidate.js.org/#sub-simplest-example
Thank You, Please help me with following question if you have any idea..( Note: not related to this video.. ) In my current project, the bundle has becoming bigger and bigger which will lead to more load time for user.. ( This will include some Ajax requests too once the bundle received by client.. Now, I have added pre-loader component in App.vue component which will slow loading screen or window until the document.ready is complete.. which will works good.. The problem with this solution, if a user has slow network as pre-loader component is in bundle which is big size user has to wait for loading screen until the bundle is fully loaded.. which is not great..) what I am expecting is some solution with 'index.html', having a loader in the inital index.html file which is small in size and disable it once the bundle and ajax requests are loaded... any idea how to achieve this in Vue ?
Thanks for your awesome explanation, can you please tell me exactly how to implement vuelidate with vuex in a effective and scalable way with more maintainable code.
Hey I try to run same validation method but I am getting error in console Uncaught TypeError: this.v$.validate is not a function Can you please help me?
Hi, after submit completed it shows required errors again , how can i fix it? It is because I change input fields values to empty string, any way to handle it ?
I wrote into the useValidate function first state and then rules - that caused the problem "Maximum call stack size exceeded". Honestly i didn't expected that the order first rules then state is imported. Could you explain why the order matters? Short: const v$ = useValidate(rules, state) does work and const v$ = useValidate(state, rules) doesn't work!
Thanks for video but you told very basic thing. It didn't help much. How about tell us how to use regex and validate alfabet fields or digit fields? How does it use?
many of the new vue 3 ways of writing code are still being developed in Vetur, you could always hard ignore lines in Vetur, but typically I just ignore the issues.
That's what I thought at first too, because that's the normal Vue syntax. But Vuelidate actually recommends using v$ or just v for the Vuelidate instance: vuelidate-next.netlify.app/guide.html#checking-for-validation-state
One suggestion for the composition API would be to use for shorter and cleaner syntax
Can you please give me an example of same
@@crazy_coder
// ----------- replace this -----------
export default {
setup(){
// code here
return {}
}
}
// ----------- with this -----------
// code here
@@crazy_coder read the official Vue3 Docs
@@crazy_coder
import { ref } from 'vue'
const count = ref(0)
function increment() {
count.value++
}
{{ count }}
This isn't actually using the Composition API as you're still mixing in the Options API with the methods object and referencing 'this', at best this is a mix of both APIs.
For reference, anyone using the Composition API. Create either a normal constant or a computed property with the object you want for your validation (see example below). Then you can use the touch() method to run the validator, or run the validate method:
const rules = {
credentials: {
username: { required },
email: { required, email },
password: { required },
},
}
const v$ = useVuelidate(rules, store) // Here I'm just referencing my Pinia store which is using reactive objects.
Inside my function I run:
const isFormCorrect = await v$.value.$validate()
and then check for errors:
if (!isFormCorrect) return
Do you checking here, else run function.
Thanks a lot @noxi
Can you please provide an example of s
Great tutorial. This helped me a lot with Vue 3 Typescript project
Glad it helped!
Very useful video and tutorial. Thank you! I just coded it with the Vue 3 script setup tag from the start and was easy to still get it right.
Thank you for this lesson .This video is very useful for me.
You saved me big time.
I'm beyond glad that I could help 😇
@@LearnVue You saved me too Т.Т
So much nicer than vee-lidate and yup. Thank you!!
0:30 Add dependencies,
2:38 Options API Validation,
5:49 Composition API Validation,
7:29 Better Validations,
8:43 Display Error Messages
9:35 Custom Validation
Thanks!
Great tutorial! but i cannot access v$.. when i print {{ v$ }} i got the following array of data => { "$dirty": false, "$path": "__root", "$model": null, "$error": false, "$errors": [], "$invalid": false, "$anyDirty": false, "$pending": false, "$silentErrors": [] }.. their is no v$.email or something else.. i checked the code several times.. i have exakt the same code
Edit: in my case it only work with "this.v$.email.$error" and "this.v$.email.email.$message".. i'm wondering, because i return v$: useValidate() in ma data function.
awesome! keep making this kind of video. specially for vue + laravel! thanks
Glad you liked it!
console.log(this.v$.email.$errors);
when i try to display the list of errors to the console it gives me an empty array, I dont know why?
Vuelidate documentation is difficult to understand, so.. can i still get and show error messages with VUE 3 without using the Composition API shown in the video?
Also, How to create custom regex validator and use it? It is confusing.. I tried.. still trying.
try the helpers.regex method (vuelidate-next.netlify.app/custom_validators.html#regex-based-validator) and to make sure your regular expression is doing what i want, i use this tool a ton! regexr.com/
@@LearnVue thank you for the useful links! Since I need to get things done I chose to do the validation without Vuelidate. Maybe I will come back to the documentation in the near future :)
Very, Very useful! Thank you Learn Vue
Hello, needs upadates) if we use script setup and submit form we need use async await to validate...
Great video! Vuelidate docs don't use a computed property for the rules object when using composition API. Is that optional? Or are the docs wrong?
Great question! Computed is only needed if your rules are accessing a reactive value, like in the example from the video. This is the part of the docs that use that reactive and computed: vuelidate-next.netlify.app/advanced_usage.html#using-reactive-state.
Awesome video. Thank you
Thanks a lot, it was very useful tutorial! 🔥
Thanks for your video!
thank you so much :) . please how can we reset form ( errors ) with composition api ?. Thank you
Awesome! Thank you so much buddy
any time - thanks! 😇
Amazing tutorial. How about server side validation such as checking if username is taken? How is that integrated with Vuelidate?
Axios
when i added tihs statement => this.v$.$validate() , this error apeared => this.v$.validate is not a function, i don't know what's the reason!!!!!
:(
Amazing content, great video and awesome explanations !
glad it helps :)
Please post a video about Vuelidate to show errors instead of using composition api>
Great video! Can you create a similar example for VeeValidate? Thanks!
definitely something ill look more into! thanks for the suggestion :)
Awesome man👍
how to validate checkboxs? for example, I want to make sure at least 3 out of 10 check boxes are checked
nice one but can i see how to handle Strong passwords need to have a letter, a number, a special character, and be more than 8 characters long. for password validation
for that, you can use Vuelidate's minLength to make sure it's longer than 8 characters. And then use a custom validator to check for a letter, number, and special character. You can use a regular expression and this is the documentation for the custom validations: vuelidate.js.org/#sub-simplest-example
Thank You, Please help me with following question if you have any idea..( Note: not related to this video.. )
In my current project, the bundle has becoming bigger and bigger which will lead to more load time for user.. ( This will include some Ajax requests too once the bundle received by client.. Now, I have added pre-loader component in App.vue component which will slow loading screen or window until the document.ready is complete.. which will works good.. The problem with this solution, if a user has slow network as pre-loader component is in bundle which is big size user has to wait for loading screen until the bundle is fully loaded.. which is not great..)
what I am expecting is some solution with 'index.html', having a loader in the inital index.html file which is small in size and disable it once the bundle and ajax requests are loaded... any idea how to achieve this in Vue ?
Thanks for your awesome explanation, can you please tell me exactly how to implement vuelidate with vuex in a effective and scalable way with more maintainable code.
is this one better or VeeValidate?
Hey I try to run same validation method but I am getting error in console
Uncaught TypeError: this.v$.validate is not a function
Can you please help me?
same error please help
use $validate instead of validate
Hi, after submit completed it shows required errors again , how can i fix it? It is because I change input fields values to empty string, any way to handle it ?
const v$ = useValidate(rules, state, { $rewardEarly: true });
I wrote into the useValidate function first state and then rules - that caused the problem "Maximum call stack size exceeded". Honestly i didn't expected that the order first rules then state is imported. Could you explain why the order matters? Short: const v$ = useValidate(rules, state) does work and const v$ = useValidate(state, rules) doesn't work!
I can't hear English, the video has no subtitles?
thanks for video
you're welcome! thanks for watching
I tried to get the cheat sheet, but after I put in my email nothing happened 😢 .
Thanks for video but you told very basic thing. It didn't help much. How about tell us how to use regex and validate alfabet fields or digit fields? How does it use?
v$ is undefined vetur problems how cai I fix that?
many of the new vue 3 ways of writing code are still being developed in Vetur, you could always hard ignore lines in Vetur, but typically I just ignore the issues.
Nice nice nice!!!!! Thx
Thank you for watching!
Thanks
No problem - thanks for watching! 😀
Lovee from Pakistan
thanks
Great
wait, isn't it $v????
That's what I thought at first too, because that's the normal Vue syntax. But Vuelidate actually recommends using v$ or just v for the Vuelidate instance: vuelidate-next.netlify.app/guide.html#checking-for-validation-state
"TypeError: _this.v$.validate is not a function" please reply for this error
Don't know if you already found it, but it is "$validate", not "validate".
this.v$.$validate() is not a function
same error please help
have u found the solution? i got same error
What a great content,ty so much!!