Laravel 8 Tutorial - Client Side Form Validation

hi everyone welcome back to the laravel 8 tutorial in this video we are going to learn about client-side form validation so let's see how can we do client-side form validation in laravel 8 so first of all let's create a controller so switch to the command prompt and here just type the command php artisan make column controller let's say controller name is auth controller all right now press enter now run the application so just right here php artisan all right now switch to the project and just open auth controller just go inside the app directory then http controllers and from here just open auth controller inside this auth controller uh let's create a function so just right here public function function name let's say function name is index and set this just return of view let's say view name is register right now save this file now let's create the route for this function so just open web.php file and inside this file just write here route get and add here the uri register inside the big bracket just right here the controller name which is auth controller also add here the controller like this okay and now here's just that column column class and add here the function name which is index all right now save this file now let's create this view so just go inside the resources directory and then views and inside this views let's create a new file register.blade dot php and inside this file let's add the html5 boilerplate so just type your exclamation sign and press tab now change the title here register alright now let's add the bootstrap cdn so just go to the getbootstrap.com and now click on get started from here just copy the css and paste here now copy the js and just paste here all right now go to the google and just search here jquery cdn now just open first link click here minified and now just copy and from here just remove this jquery slim version okay so just remove this line and paste here all right now save this file now let's add the parsley stadium parsley js cdn so go to the google.com and here just search parsley bs cdn all right now click on first link and from here just copy this parsley.main.js okay so just click here and after this paste here all right now save this file now let's add the form inside the body so first of all just add here the section and give some padding so just write your style padding padding top let's say 60 pixel and inside this section just add here the container then row column empty six and set here the offset md to md3 all right and inside this just add your card then card header all right just add the title register card body and inside this just create a form okay so just write here form and set the id let's say register form all right and inside this form uh first of all add here add relate csrf all right and now let's create some input field for the name email password confirm password and phone all right so just write here form group and here just add the label for name and just add here name okay now create the input field input type is equal to text and name is equal to name and just add here the id name and add here the class form control all right and just write here required okay now just copy this and paste here uh email password and for the confirm password and form all right and now just change here email password confirm password all right and this is for phone so let's write your phone now change here phone phone all right and perform password so just right here see password now just copy this and paste here all right and this is the password so just write your password now copy this and test here name id all right and this is for the email so just write your email name email and id i mean all right also change here that type email and in the password just write here input type password and for the confirm password input type password all right okay now and here the submit button so just right here button type is equal to submit and here the class btn btn has primarily and just add here a text submit all right now save this file now inside this field let's add the parsley validation so let's add first to the name so just write here data dash parsley so lastly dashpad card and just write here for the name uh the big bracket just right here a2z and capital a2z all right and here just right here plus sign and dollar sign okay also accept the space so just right here all right and now data that's parsley dash trigger is equal to here all right now just copy this and paste here inside the email password and confirm password and also inside the phone all right and inside the email field just write here data dash parsley and here just add type is equal to email all right and inside the password let's set the length so just write here data dash parsley and as length is equal to just add here the minimum and maximum length let's say minimum 6 and maximum 12 all right and beside the confirm password just write here data dash parsley dash equal to all right and just add here the id of password okay so just write it as password all right and inside the phone just write here data dash parsley and just head here 0 to 9 all right and here just also add the length so just copy this and paste here all right minimum length and let's say 10 and maximum 30 all right okay now uh here just add the script tag a script and inside this just write here download function and inside this dollar and just add here the form id which is a register form all right dot okay now save this file now let's add the css for the pass list so just go inside the head and here just add the style tag and just write here dot parsley that's either it also does list like and just write here a list of style none and also set the color red all right now save this file go to the auth controller and let's create another function here just right here public function and function name now let's say function image register submit here just write request dollar request all right and just return simply return a message [Music] form submitted successfully all right now let's create the route for this function so just go to the web.php and here just write route post and uri register controller name auth controller column column class and here the function name which is register submit okay so just copy and paste here also add the route name dot register submit all right now just copy this route name and just go inside the register dot php file and inside the form just add here method post and action action is equal to just add here double cut bracket allow all right now save this file all done so let's check this this is to the browser and just go to the url that's register [Music] and you can see here the form okay now just click on submit and you can see the validation error okay if i enter here the wrong name let's say one two three you can see this value is not valid okay invalid just enter here the correct name let's say mark is on enter here the mail id let's say amazon [Music] all right now add here the password let's say one two three four five six seven and here let's uh add here the confirm password different okay and you can see here the validation error this value should be the same all right so just add here the same confirm password okay so just write here one two three four five seven eight seven all right now add here the phone number uh let's add invalid phone number you can see the validation error now let's add the correct phone number like this all right now just click on submit and you can see here the form submitted successfully all right so in this way you can add a client side form validation in laravel 8 so that's all about client side form validation so thanks for watching this video and if you still have any kind of question you can ask me in the comment box don't forget to subscribe my channel thanks for watching

Channel: Surfside Media

Views: 4,140

Keywords: How, to, Program, laravel (Software), laravel, laravel v8, laravel 8, laravel project, laravel setting up, laravel v8 setting up, laravel v8.0, v8.0, laravel 8.0, laravel 8 playlist, laravel 8 tutorial, laravel 8 lesson, intro to laravel 8, laravel tutorial, laravel 8.0 tutorial for beginners, laravel for beginners, laravel tutorial for beginners, client side form validation, validation using parsley.js, parsley form validation, client side form validation in laravel 8, laravel8

Id: ubto4lpwFtQ

Length: 17min 4sec (1024 seconds)

Published: Fri Sep 18 2020