@@crazy_coder // ----------- replace this ----------- export default { setup(){ // code here return {} } } // ----------- with this ----------- // code here
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.
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.
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 :)
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
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!
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 ?
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 ?
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.
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.
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.
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
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?
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.
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 }}
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?
Great tutorial. This helped me a lot with Vue 3 Typescript project
Glad it helped!
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.
Thank you for this lesson .This video is very useful for me.
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
Hello, needs upadates) if we use script setup and submit form we need use async await to validate...
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!
You saved me big time.
I'm beyond glad that I could help 😇
@@LearnVue You saved me too Т.Т
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 :)
awesome! keep making this kind of video. specially for vue + laravel! thanks
Glad you liked it!
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!!!!!
:(
how to validate checkboxs? for example, I want to make sure at least 3 out of 10 check boxes are checked
I tried to get the cheat sheet, but after I put in my email nothing happened 😢 .
So much nicer than vee-lidate and yup. Thank you!!
Thanks a lot, it was very useful tutorial! 🔥
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
Amazing content, great video and awesome explanations !
glad it helps :)
thank you so much :) . please how can we reset form ( errors ) with composition api ?. Thank you
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!
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 ?
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
Very, Very useful! Thank you Learn Vue
Awesome man👍
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 can't hear English, the video has no subtitles?
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.
Please post a video about Vuelidate to show errors instead of using composition api>
is this one better or VeeValidate?
Awesome video. Thank you
Amazing tutorial. How about server side validation such as checking if username is taken? How is that integrated with Vuelidate?
Axios
Awesome! Thank you so much buddy
any time - thanks! 😇
Great video! Can you create a similar example for VeeValidate? Thanks!
definitely something ill look more into! thanks for the suggestion :)
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.
Thanks for your video!
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.
Nice nice nice!!!!! Thx
Thank you for watching!
thanks for video
you're welcome! thanks for watching
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
Thanks
No problem - thanks for watching! 😀
Great
thanks
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?
Lovee from Pakistan
"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!!