Easy Form Validation with Vuelidate | Vue 3 Tutorial

[@pagevpetty]

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

[@lunarcdr3083]

Thanks!

[@QueeeeenZ]

One suggestion for the composition API would be to use for shorter and cleaner syntax

[@crazy_coder]

Can you please give me an example of same

[@_timestamp]

@@crazy_coder // ----------- replace this ----------- export default { setup(){ // code here return {} } } // ----------- with this ----------- // code here

[@fiendsgaming7589]

@@crazy_coder read the official Vue3 Docs

[@fiendsgaming7589]

@@crazy_coder import { ref } from 'vue' const count = ref(0) function increment() { count.value++ } {{ count }}

[@dethcx22]

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.

[@raydenchan]

Thanks a lot @noxi

[@crazy_coder]

Can you please provide an example of s

[@francoislacock]

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.

[@thulas-mkhwanazi]

Great tutorial. This helped me a lot with Vue 3 Typescript project

[@LearnVue]

Glad it helped!

[@cutipets8706]

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?

[@davidadu-tenkorang3186]

You saved me big time.

[@LearnVue]

I'm beyond glad that I could help 😇

[@annizma6873]

@@LearnVue You saved me too Т.Т

[@artemkomarov9902]

Hello, needs upadates) if we use script setup and submit form we need use async await to validate...

[@weristsam]

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.

[@mangouni]

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.

[@LearnVue]

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/

[@mangouni]

@@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 :)

[@abubakirmahkamov]

Thank you for this lesson .This video is very useful for me.

[@hadeelkamalgobbar4694]

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!!!!! :(

[@kennyendowed9814]

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

[@LearnVue]

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

[@josepacheco1063]

awesome! keep making this kind of video. specially for vue + laravel! thanks

[@LearnVue]

Glad you liked it!

[@TheMalni]

Thanks a lot, it was very useful tutorial! 🔥

[@Troy-ol5fk]

how to validate checkboxs? for example, I want to make sure at least 3 out of 10 check boxes are checked

[@ddung203]

I can't hear English, the video has no subtitles?

[@Useroelas97]

thank you so much :) . please how can we reset form ( errors ) with composition api ?. Thank you

[@usertester8982]

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?

[@siddeshbarhate7516]

same error please help

[@abhinavsharma5526]

use $validate instead of validate

[@happychristian1389]

is this one better or VeeValidate?

[@jessicaryan9820]

So much nicer than vee-lidate and yup. Thank you!!

[@martinszeltins2045]

Regle is the successor of Vuelidate since Vuelidate was discontinued.

[@faredshadman]

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 ?

[@faredshadman]

const v$ = useValidate(rules, state, { $rewardEarly: true });

[@RicardoGarcia-wk8ds]

Very, Very useful! Thank you Learn Vue

[@priya6491]

Please post a video about Vuelidate to show errors instead of using composition api>

[@KhanhLe-vi6gr]

Awesome video. Thank you

[@disa1710]

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?

[@LearnVue]

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.

[@rosia1948]

Awesome man👍

[@pagevpetty]

I tried to get the cheat sheet, but after I put in my email nothing happened 😢 .

[@msdnsditlabs5328]

Awesome! Thank you so much buddy

[@LearnVue]

any time - thanks! 😇

[@brunoberrehuel4833]

Amazing content, great video and awesome explanations !

[@LearnVue]

glad it helps :)

[@hackwithharsha5228]

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 ?

[@madhz007]

Amazing tutorial. How about server side validation such as checking if username is taken? How is that integrated with Vuelidate?

[@jessicaryan9820]

Axios

[@eduardomavlyutov4710]

Thanks for your video!

[@antoniogiroz]

Great video! Can you create a similar example for VeeValidate? Thanks!

[@LearnVue]

definitely something ill look more into! thanks for the suggestion :)

[@serdar_a]

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!

[@timzeynalov3537]

v$ is undefined vetur problems how cai I fix that?

[@LearnVue]

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.

[@TechnoTrace]

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.

[@paulojose7568]

wait, isn't it $v????

[@LearnVue]

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

[@softwareEngineerKunwar]

thanks for video

[@LearnVue]

you're welcome! thanks for watching

[@zergzerg4844]

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?

[@abimaeltavares1620]

Nice nice nice!!!!! Thx

[@LearnVue]

Thank you for watching!

[@justAblog]

Thanks

[@LearnVue]

No problem - thanks for watching! 😀

[@Popc1007]

thanks

[@motu0427]

Lovee from Pakistan

[@GigaHertZ28]

this.v$.$validate() is not a function

[@siddeshbarhate7516]

same error please help

[@213benimulia]

have u found the solution? i got same error

[@thatsenam9183]

Great

[@siddeshbarhate7516]

"TypeError: _this.v$.validate is not a function" please reply for this error

[@dan_vl1909]

Don't know if you already found it, but it is "$validate", not "validate".

[@xxxx-xx4im]

What a great content,ty so much!!