Laravel Form Handling and Validation Tutorial with example - All about Form Validation in Laravel 10

hey guys welcome back so guys in this video we are going to learn about the form handling and validation in laravel okay so now guys let's get started so let's move to our editor okay so first up guys uh let us create One controller so let me open a new terminal Zoom it PHP Artis make colon controller and the controller name product controller hit enter so here our controller is created go inside app HTTP controller your product controller perfect and now guys to get started we need to create a simple product form and when we submit that we need to check the validation so guys let's create one function with the name index to show the product page so public function and the function name so my function name is index and here I don't want to give any return type and now guys just return view where I will tell in the front end I have a products file okay so go to your resource views frontend inside frontend I create a new file products. blade. PHP hit enter and not products we'll create the page name as product hyphen create okay product hyphen create and now you can retype the file l so here only product create now you can just click and move to that page so now guys let us uh extend our layout so guys let us go to our index blade and copy the layout extend format and let's end the layout copy and paste okay so our layout is ready and this is products create okay not product it product and now guys start designing your form so I have already integrated the bootstrap so use a container then row then column md2 not 12 let's make it to six and keep the content in Center so justify content Center and then let's start with with the input Fields so label name and the input name attribute name and class form hyphen control and now let us copy this and keep pasting for other fields so what are the fields guys let me just show you in my model so you can go to your app models where product.php so here you find these many columns are there so guys let us copy only the name description and the price stock and active okay so let me copy this get back here I mean on the create blade file Let's see we have to create one prize so create that prize stock and is active also let me copy and paste here is active and this is going to be a checkbox guys so and here and let's remove it and now guys one more box been required for the description area so either you can use a text area or it's a normal input so let us use a text area yes paste it and column can remove it ID also not required in instead give a class form hyphen control how much three and this is prodent description all set and now guys one more field you require is about the button so make it button save type equal to submit and let's design this button with the primary class of bootstrap and guys so let me minim as this row here and inside the container let's open form tag and end the form tag and just end the form after your road division okay and now guys inside this form use a method post and here action goes to your some URL us a URL function and products forward slash create okay and whenever you submit a form in larel you need a csrf token so just add that csrf token here cool okay so our form is ready guys and now let me show you the output so before showing the output you need to set up the route to view this page so guys you can just go to your uh routes web. where is web.php here and let's me copy this route and paste here and just tell product hyphen create. PHP with the get method and you can remove this code and add your controller so what we'll do I'll copy this controller name go to your web.php paste here colon colon class and call the function name so it is index so you can see that we have created on the index part so if you don't want to create on the index let's make it as create method so it is understood as a create form so guys you can just update it done and now guys when you submit the data like let me copy and paste so here you once you submit this form you're going via post method so what we'll do we are going to just copy this get back and paste here so paste it and make this to post method so guys here you see one difference that is about hyphen here so if you want you can just keep the same route so no difference one is get method and is one is post method so you can keep the route same but methods are different so it doesn't affect so once you submit it you need to go on store method to store the data or do the validation in that so guys let's copy this store name String value and create as a method or a function so let's create it public function the function name that is store open and close and now guys the first step here it comes about the request so what what does this request do here so this request is about getting all the input field name from your form tag all the inputs which is inside the form it will take all the inputs and send you on this controller with the request so now guys let us use this and do the validation so our concept of this video is about form handling and validation so it starts here so guys now let me just show you the output of this product form let's go so call the URL okay product controller does not exist why because we have not imported its class so you can import the class or let's go to the product controller and just copy this complete name space and paste before the controller class use a back slash okay not forward slash save it and now you can easily call the form cool so here you see guys that our form is called but it's like very awkward design let me just fix that quickly yep let's go back here and so guys I have just fixed the form here so you see that row and colum md6 the card body here and all the input Fields I have kept in one card body okay so let me just minimize and you see that complete form tag cool so now guys let's continue refresh okay it's looking better and guys I'm missing with the checkbox just remove this form control we don't require here you can just add a width colon 40px H HT colon 40px okay just add a br tag so it breaks down cool so now guys let's begin with uh do the form validation so first step let's get back and once you submit you go to your action and which is coming on this store method so now guys let's get started with the create validation so first step you're going to call your request of validate function and then inside that array and now you call your all the input field names okay so we see that we have how many fields like name description price stock and is active so here we see name let me copy this and give the input name name here and then your rules validation so guys it is a required field and then give pipe symbol and use max of 255 characters okay and if you want to give minimum also you mean of three and then pipe symbol and this is how we do validation and now guys let me fill with other fields that is description let me copy this description part and paste here let me Zoom it so it will be more clear okay description and then guys you can do the same validation let me copy this and paste here so I do not record a minimum part here and description comes with the more data so you do not specify the how much length you required but you can tell I'm getting all the value as string here and also in the name field I'm getting a string value Okay so now let me copy and paste with other field that is price so coming to the price validation it's all about integer so you can add that as a numeric so copy and paste and is coming to the stock means this is also a numeric so you can keep it numeric and copy and paste and then is active is all about Boolean like true or false so you can mention is required and it is Boolean or when you come to Boolean part is required is not required it will always check for true or false so guys this is one method of doing validation and let me just show you what happens now so let's get back and let's click here to save so you see it loads and just comes back here so what happens what is the error we don't know how to show the errors so let us see that so once you submit it just comes back to the same form so to see the errors let us see one method of seeing errors let me add a div here okay which is coming with the UL tag and lii tag and here at this beginning of div add dollar errors so this is a global variable given from the larel and any function if there any errors in the form so that time just show all the errors so you can just take this variable and loop out using for each Loop so where you Loop this this Li tag I'm going to Loop it so for each where dollar errors of all function where I take all the errors of error and Echo that so where you'll Echo inside this AI tag so open and close and let me push inside the for each Loop and here let's add a bootstrap class like alert alert hyphen Danger let's save it and now guys if you just refresh and let's click on save so here you see the name field is required description is required all the field is required okay so if I just fill any of the product name here save and you see that um product name has gone and now guys but I want to show the old data here like whatever I have typed I need to get that so for that you can just add a simple code here inside this input field add a value attribute and use old function and make sure whatever the name you have passed and whatever you're using here in the validate function that same name should be called inside the old function so it gives the old data so let me just add ASD and save here so you see that old value has printed and guys you see that we don't have this is active so basically checkbox gives like on and off so we might get an issue so let me just check this checked means it is true so if you see here the is active field is must be true or false so basically it's not going to work out because it is checkbox so it is not checking with true or false so for that you can just give the another condition like sometimes so sometimes I might check or sometimes I might not so now it should work as it is called correct and if I just check so it doesn't affect that okay so you can utilize in that way also okay so guys in the second way so let me just copy this paste below and comment and keep for your reference so now guys coming back here I'm just going to put this in a complete array array here and now you need to give single Cotes and separate them by comma so this is doing another method of validation so I'll just show you now get back just submit here save so you see everything works fine let me remove the data submit code so you see the second example and now guys let's see with the third example comment this and keep for reference and now guys here you see about the error message so I'm talking about the message now so the name field is required let us customize this message let's get back to our editor let's keep this in one line so it will okay and now guys inside this array itself so this is my one array and after this array just create a new array and mention the messages so let me just show you how we can do that just copy this name paste here and then give Arrow function and give the message so you cannot directly just paste the message here like just add the name and show the message you have to mention for what validation you want to show the message so name of required field so you just add that dot and required so when validations come on the required field then you have to tell name cannot be empty okay now let me just show you the difference here so right now you see the name field is required now if I submit so it will tell like name cannot be empty so here if I give submit a and here you see name field must be at least three characters so you can customize this message also so let's get back let me copy and paste here and let's add this Min here so name give at least three characters for name okay now you can just get back and submit here you see give at least three character for name so what name I don't know so you can add that as a product name and here also for the product name cannot be empty let's save and refresh okay so submit product name cannot BMT let me give a submit and at least give at least three characters for product name and let us see that submit here okay perfect so guys you saw that how to customize the message so same way you can customize for all the messages okay so now guys we have seen one method of doing validation with three examples so which was about using the validate function or method okay so now guys we are going to do the validation using validator fets okay so let us see so guys let's create one variable called valid dator equal to and call validator colon colon make function so inside this make function you pass all your request so all of the request field which comes in Array format so First Data will be your all the input Fields oops I have made a typo here it's small a and and now you give all your validation in the second so now guys you need to import this class let me import the class here and you need to select eliminate support fets and valid data okay so let me just show you that perfect so guys if you want to get this import class just install your namespace resolver okay PHP namespace resolver you will see this option of import class cool so now guys let us continue with the validation so first step you'll add all the input Fields whatever you have given here like your name description price all the input field validation as we have seen here already so guys I'm just going to copy and paste we don't want to waste the time so let us paste here okay and then guys you need to check here if it is fails then you have to show the message okay what all errors you have got so just use if condition and open and close craies and check dollar validator of Arrow fails function okay so this is the main code guys here if it is fails then you need to return and redirect back so just return redirect back with what with errors so use with errors function that is your validator errors list so validator of all the errors so you have all the errors in one error function and you send that and also I want to send all the request input Fields so you can get that with input okay and now guys when you submit you get the validation so let me refresh here and now let's click to save you get the validation okay and let me add one so here you see it changes okay perfect so now guys uh let's get back and do the one more example inside this validator itself like as we have already seen how to set this in AR format you can utilize it let me just copy this and paste here so you can use the same method you don't have any difference and the the output is going to be the same okay done and now guys if you want to customize the message also you can customize it so let me add this copy and paste after your array so here the third argument it is going to be let me UNC command and align it okay the first is input the second is is validation and third is message so if you refresh and let's again click to save so here you see message changes here okay so guys this is a second method of doing validation and now let us see with the third method that is most of my favorite which is about the form request validation okay so let me comment this and open your terminal so create a form request with the Artis command so that is is PHP Artis make request which is form request so let me keep my form request name as product form request hit enter the request has been created so you can find that inside the app HTTP request which is your product form request here you come and now guys you have to give the authorization which is true or false so guys in most cases like inside your admin dashboard I use like Au of check which gives true or false so right now I don't have any such condition so I'm directly giving true here okay and now guys uh once it is true then you can write your validation rules over here inside it so let me just so this is how our form request file looks and now guys let us type the rules here so I just don't want to waste time let me copy and paste it so then just get below copy the first format and paste here so UNC commmand that's it guys so you have pasted the rules and get back to your product controller and now here instead of request you have to use your product form request so let me just copy that class name so this is my product form request copy and paste here and you need to import its class so import the class and it's imported cool so now guys to get the form request validation done you have to just call your variable called request dollar request of validated function that's it done so now guys you can get back let me refresh submit all done and now guys coming back again to the different type of setting your validation so you can use the same format here instead of using in this pipe symbol you can use in Array format and show that so save it's the same output and if you want to use a customizable message to show it so for that you can use a different way like you cannot handle insert this one because here it accepts only the rules for it so guys for that you can let me copy this message here first and get back to your form request validation and then just create a function public function the function name is messages okay colon array format a r r ay array and just open and close calibra and user return Then array let me just align and semic colon and now guys here you see that for this name you are doing this name of required then minimum for this you have to give like this and same with the other field also so now let us save and see the output Let me refresh first and then let's submit so here you see the product name cannot be empty type the product name and save and here you see a different message for that error cool so now guys we have seen how to do validation in three ways in LEL okay and now guys the last part I just want to show you about how you can display the error messages so coming to displaying error messages you see that we have shown in one method like looping all the errors in one place so guys instead of showing all this error message at one place I want to show them under its input box okay so let's get back and go to your product create so so instead of this looping all the error messages I want to show here so you can use at error and end error okay and give the field name so here whatever you have done the validation request and then guys you need to to call your dollar message that's it you don't have to specify what message of name or anything just it handles automatically okay with this field name so let me paste this description also here and let me just use a span tag and insert that I want to show a class text Ty and danger to show as a danger message okay warning message so you can utilize again here let m control X based let's control CV let me zoom out a little okay so it's for the price so product price and paste here for the stock and it's active that's it guys now let's save and get back refresh okay so if you click here save you see that product name cannot be empty cool so we have done the validation and also shown how to display the error messages so guys in this video that's it we have seen complete form handling and validation in LEL so guys thank you for watching this video please subscribe like and share

Channel: Funda Of Web IT

Views: 1,453

Keywords: fundaofwebit, laravel form handling and validation in laravel 10, form request validation in laravel 10, laravel 10 form validation tutorial step by step, laravel complete form validation tutorial, laravel form submission with validation, laravel 10 form handling and tutorial, form handling & form request validation, form validation with example in laravel, laravel 10 tutorial step by step, FormRequest validation in laravel

Id: TvK1JgwSVhA

Length: 27min 2sec (1622 seconds)

Published: Wed Dec 13 2023