Form Submission with Validation Laravel & Vue

[Music] hey there so in this lesson I am going to build up a form in laravel and you the front end is view and the back end is laravel and I'm going to discuss various aspects of building a form in view and laravel so there is an aspect of sending your request from front-end view to laravel where Axios and there is another aspect of handling your validation messages which is coming from laravel so this is the form which we are going to bend and this is a simple contact us form with four fields and when you do submit the form without any fields it gives you the validation errors which are coming straight to the lab and when you type out it clears out the validation messages and when you do submit a good request you should get our success response back from the server so this all we are going to build in laravel and view and so let's get started and we dive in into a new project which I just created named la review form and this is a blank project I just installed it with the latest laravel version the laravel version I'm working on as in seven and the view version which I am currently working on is 2.5 points 17 so first things first we will generate a contact model which will store the contact details for us and we will also generate the controller and migration file along with that so I am generating a new model named contact and along with the con controller and a migration files so we will open the migration file and add the fields which we need the first thing we need is a name email and a subject and another thing that we need is a message so this is the basic contact table with four fields in that before we can migrate I need to create a new database so let's just quickly create that we will name it la review form which is same as our project name this is currently a blank database we can now go ahead and configure our env file with the same name la review form the username and password remain same I can now go ahead and run the migrate commander so migration is done now I will generate my routes so in this we are going to have two routes one from which we will show the contact form which is going to be contact create and another one is for the post request which will accept the request from the contact form and this is going to be contact controller store basic crud stuff we are doing so in contact controller I can now go ahead and create my methods first one is create an arborist store so in the create method what we are going to do is simply return of view named contact and in store first let's just write the code for contact thing and later we can go ahead and buy the store method so I will generate a new file create dot blade dot PHP let's just have this basic HTML markup and in here I need to pull a couple of files the first one is basically the AB dot GS file this got build and this got compiled and build and this has all the view foreign components inside it so we included this file because we need to have view library included in the page and also I'm going to use bootstrap library in the page so I'll copy and paste the foe to include them have dot CSS file which contains all the lab all the part of the CSS libraries that includes more bootstrap as well now I can go ahead and copy and paste the code which I have already done for the contact form so here is my quote for the contact form this is the basic form basic bootstrap form it has four fields on the email subject and message button at the end of sending a message and a reset button on the top it has two divs to show a success message and an error message by default both of these fields are hidden by using be none class of the bootstrap let's just serve the our project and see if we are able to see this page so it got served on for 8,000 to you contact not found' let's see what is wrong with our okay I needed create my bad I'll just change the name to contact alright let's just try once more there you go we have the contact form I just add a bit of padding and also we will include some basic bootstrap classes to make it look better so we have these two pairs so this is how our form looks currently it's not functional it is just a basic HTML form now I can go ahead and write my API for the store method so what needs to happen when your server receives the request from the form first thing first we need to weld it the request so I will utilize the validate method of laravel and we will validate the different fields for name it should be required email is required as well so basically all the fields are required and for email it should be a valid email once we have rated the request let's collect the beta in a variable called validated data and now we can go ahead and invoke the model and say we want to pass on the validated data to create a new row in the database sounds good and once we are there we can import this class and once we have created the neuro we can return on new this bones basically in JSON response of message saying on text created one more thing that we need to do is by going into contact model and declare a property named guarded to blank so we are not guarding any fields we're just letting the request flow for this example so this is the store API we will hit this from our Axios so now we have the front-end basic front-end ready which is this form and we also have basic back-end API ready which is this form so we have the basic code ready we will move on to the next step which is getting the form ready form component ready basically creating a new view component so let's move on to the next step so I will go in my resources J's and create a new component name on that component dot view it will have a basic template I'm keeping it drying for now and let's name it contact component and it will have a data property which will return so we will need to bind the view variables with our form so let's just declare the properties in our form and in our view component and we will declare it inside a property called form data so we basically have four fields these are named in subject and message all of them by default are now and once we have declared these we can now go ahead and use this component inside the contact page I'll just close all of these okay so we can now go ahead and link it with this form elements first thing what we need to do is use this component inside this page so what we are going to do is there are two ways to include this template which is basically the form for your component you can define all of this code inside here or what I'm going to do is use this and this as an inline template so what I will do is I will say this is my contact component it starts here and basically ends here this is my contact component and it's template is inline template I'm doing this because this is a one-off use component I'm not going to use my contact form again and again in the website if you have a scenario where you are going to use this template again and again then you should probably put the code of this inside the template tags for the simplicity I'm just using the inline template all the components of your view needs to have a single root there so I will define a root 2 here which starts here and basically ends here and now I can go ahead and bind my more inputs to my model properties so we model a value savvy model direct rail and I will form it link it to form data dot name and similarly for other input fields I'll just copy and paste this form data dot email form data dot subject and formed it a dot message let's just refresh the page and see if we broke anything or if it is working fine so we refresh the page and okay we forgot to register the component so what we need to do is go in the app dot GS file and register the component view does not yet know that you have created a new component and basically we need to tell view ok I have this new component main contact component and its location is component slash contact components so basically we tell you this is my component that I am going to use and adjust after this we have defined our view instance with an ID of app and we are going to use this ID right here let's try it again and before we can start running we need to have the NPM running so we will start the NPM this basically tells NPM to watch any changes that we are making build the changes compile it into a drop GS file which we have already built which we have already included in the page so this is building compiling and building this is done I think now we should see some different error message in line template components must have exactly one child element world so we have this contact component and this is in line the stiff starts here and the death ends here okay I forgot to close this thing sorry about that let's refresh again and now we don't see any error messages and in our view we have this component where we have all these four fields let's start typing in this fields so we now confirm that these field are reactive now we can move on to the next step which is basically sending this request data to our server and we will create a new method for that let's call it store contact and in here I will have a new Axios request which basically accepts the URL which is contact we are sending the post request of the contact and we are sending the form data so axis works on the promise base request to just when we send the request we make a promise that if we get a successful response we get the response and let's just define two more fields here named sixes which is false by default and error which is false by default so if we receive a successful we will call a new method named on success and it will send it the success message we need an another field named catch in here we will get the error and we will call another method from here called on failure here we will send the response message so we now need to define two more methods which is on success which accepts a message and yes we changed the variable success to truth similarly for on failure we changed them on error to prove don't worry about the message we will utilize this later so we now have two more methods in our code we are sending let's review this we are utilizing xu celebrity to send a post request to contact and you're sending the form data which in this includes all of these we make a promise that if they receive a successful response then we will call this method and we will send a message that we got from the server in case we get an error or we catch an exception we will catch it and we will call this method so let's bind this store contact method to our contact form and we will go to the form and we will see that on the submit of this form prevent the default action and instead call this method let's test if the score is working fine so we refresh this page there are no errors in the console we send blank request and it hits the server and we accept we get the 422 which is a valid response so let's see man network tab what we are doing we are sending blank request for server which means that it fails at the validation and we get the message that given data was invalid and along with that we get errors along with that okay so what needs to be done currently there is no nothing happening on the front end so what we will do is we will utilize these two bills to show the response to user so we will remove D none so that means it is visible by default and in steel we will utilize V if property of view we've done way of you and bind it to success and bind this one to error so let's refresh our page and send the message and we see this there was a little error sending your message one thing if you notice is when we refresh the page you see both of these messages for a fraction of second and to remove that we have this V cloak here so let's just go ahead and set the display to none so now if you refresh this page you won't see that clothing anymore okay let's move on to the next step so we are till now we have created a new instance we have binded the fields to the input or input input fields and we are sending request to the server we are getting the response back from the server the next thing which we are going to do in the next step is handing the validation errors let's move on to the next step so if you currently see what is happening is we catch the error and we directly go onto the on familiar method whatever is the response we go on to the on failure method but instead what we need to do is we need to catch the errors and show them below the field of which they belong to if so if we get an error that the name field is required this needs to go right below the name field so first thing first we need to classify here what is the status code that we are getting from the server if it is 422 then probably we need to call a different method let's call it set errors and here we need to send the error messages if there's any other issue like 500 or 404 then probably we need to go on this method all right let's create a new method named set errors for that what we are not going to do is we are going to take all the errors that we are going from that we are getting from the server and assign it to a new variable named errors so this is a blank object and we create another method named set errors which basically accepts all of the errors and science' to the errors object let's pressed this thing so in note view we have now a new empty object and we send the message okay I think something is wrong cannot read property data of undefined okay I think I made a typo here refresh it again send the message and in our view we have four errors so email field has an array of one with zero it key is the email field is required similarly for message for name and subject so we are now a step ahead step further into showing the validation messages next thing what we need to do is we need to show these error messages here and also we need to make this border read like it the border read so if you send an empty request the field border becomes red and dot also shows a empty message so for that probably I need an another method which checks that if this error has an error for the particular field so I have I am creating a new method named has where I pass on the field name and basically it checks if the key which is this belongs to the matters object now I'm going to utilize this has error in my contact or blade or PHP so bootstrap has this class of is invalid which they see which is basically when applied to the textbox let's say if we apply is invalid to the name textbox and i refresh this page it gives me a red border but i cannot just apply is invalid to all the fields we need to check in dynamically if the error if the key hasn't if the input field has an error and if fears we apply the is invalid class so we will do the dynamic class binding and in here we call the newly created methods named has error and if it returns true we apply the is invalid field and not we just leave it Klim let's just copy this for for all of the fields and change the name of the input field let's try it out to flesh the page all the fields are empty we submit the message and all the fields can duff red border along with the red border what we need to do is we need to show the feedback to the user of what's wrong with the input so we will utilize another another class of bootstrap which is basically invalid feedback and we show this del only then we have error for that particular field in our errors object so we show this field if we have a name of error and if we have an error for the field name in the classes invalid feedback and what do we show to the user we show to the user errors object and the name field and zero it to zero it at anywhere X but exactly the error message is so we refresh this page we send an MP request and we get this the name field is required but if you think about it we can change this to a method as well we don't need to go into the depth of this which you can just include another method named get error which basically accepts the feeling and it returns the error message at the zero air index so instead of this I can say get error of name and similarly I can replicate this day for the other in force as well by just changing the name of the input field we have the score email we have this for subject we have the sport message alright let's test this out we have this wrong we submit it and we get the proper messages validation error messages for all of the fields okay next step is when the user starts typing on this field it should clear out this error message which we are not doing that here because we are not capturing the event so let's go back to our form and in our form we will add a new event named key down and we bind it to a new method name clear error so clearly it means that we need to add another class to another method to our view instance and we will accept the event and what we will do is to clear the event to clear the input we can do delete and this dot errors and event the target dot name basically what is happening is we are going to the errors object and even the target opening what is this so event is where the event happened so if you are pressing down here on this field this is where the event is happening this is the target and its name is me for this the name is email so we are just passing on the name of the field we're event has happened and we just delete that key from the errors object and let's just see this in action we send the request and as soon as you start adding on this field the error is gone so if I show you we have these three errors right now email message in subject and I as soon as I start typing on the subject field the subject field is gone and so the error message is from the screen because of the reactivity of you all right let's go ahead to another step weird what we need to do is if user has as available errors on the form we need to disable this button we should not allow user to hit the server again and again if he has errors on the screen so what we can do is we can create a computed property which basically checks maximum it has any error and which basically check if there are any errors in the errors object all we do is we you realize the object dot keys method of JavaScript pass on the object check the length and if it is greater than 0 it returns true so we refresh this page by default the button is enabled if I send the request the button is still enabled there is some issue let's just check as any okay I haven't yet used this field in my form so we will use this field right here this is the input button and we will bind the disabled property of HTML to has any error all right so now I think we should really check what is going on so by default the button is enabled we submit the form and now the button is disabled what's fine right but there is an issue with this we clear on the form fields why isn't this this wing off let's just check what is going on here has error email on the email field we don't really have the name okay so that was the issue you defined the email name and now I think it should work fine okay we send the message we type in and it clears all the fields and yet the button is disabled why is this so because has any error is still set to true even though the errors object is empty this is still set to true why is that this is because what we are doing is we are utilizing the delete math delete keyword of JavaScript delete the case from the error from the object and for the view reactivity this doesn't happen you doesn't even know that we have deleted these keys from the object to make it available to you to tell view that we have really deleted the keys instead of delete will utilize the doodle delete method and pass on the errors object and as a second parameter we pass on the key that needs to be deleted so this is the issue that I encountered while working on this form so I just thought letting you know that they are for the objects view isn't always reactive when you add a new property or delete the property from the object you need to use set for view dot set for setting the new field and you don't delete for deleting only fields from the object so now let's test it again we send the message there are validation errors and as you clear out the messages you are now you can now send the message again the button is enabled again alright let's move on to the next step where we do sand actual requests to the server so basically what I will do is I will sign that genuine request to the server and we do get a green message from the server so this part is working fine the one issue that you can see is we sent a successful request but even though the form filled in the even then the form fields aren't cleared out so we need to have a reset functionalities which basically clears out the form fields for us and that bet method we can bind with this button as well but click on this button nothing really happens right now so what we need really is a reset button reset method what reset will do is basically it will move through the object or form data and it will set the form date of feeling to null which was basically by default and if there are let's say your user is working on the form nothing there is some issue okay before what this thing okay we refresh the form let us say a user is working in the form and there are some error messages on the screen and he really needs to get rid of those best specimens reset button so we need we also need a way to clear the error messages when we are resetting the form so let's just include another method that says clear all errors and this basically does is sets the error object to a blank object we call this dot clear all errors from here so when do we need to be set once we reach the success page so I will call this dot reset from here and you also need to bind this method to our reset button for the reset button when we click on it we went any default action and just call the reset method so let's test it out we have this error is enabled the way we set it in layers are gone we submit a good request to the server we have the success message and then put fields are cleared so we are now done with the reset thing as well so far everything is working fine we have the validation message validation messages that we are getting from the server and we are showing it on the screen we have this success message with it that is that we are showing engaging the successful response but if you see into the code there is a lot of methods that we have written and if you have multiple forms on your application repeating this steps for all of the forms will be a nightmare so in the next step what I will do is I will refactor this code and we will make it into a reusable classes reusable view components that you can reuse on any of your laravel application forms so let's move on to the next step all right so first things first what I really think is we can take out these form related methods into its own view component named form so let's create a new component named form dot view it basically has a blank template the name is foam and for the data field this basically has these two fields so we copied these two fields which basically belongs to the form and getting it from here and for the methods I think we can refactor the code and copy so the own success or failure we set all these methods should belong to form these can really be reused again and again in all of our forms I think I've pasted minute wrong place this should go just after the data so we have this three methods and if you really think when you're making a post request whatever you're doing is going to repeat the same for all of your forms so we can reuse this we can create two more methods on or formed one is post and another is dead so we are basically building our own little tiny so on API for our own use so inside the post what we are going to do is we will copy all of this code and put it right here since we are going to build a generic form component this merely needs to be a variable and this needs to be a variable to which we can pass it to this function so we have this own success here we have set errors and we have one failure here for it looks good to me and similarly for to get what we need to do is change this to look at and same thing here we are just going to utilize the post method in this example but you can get the idea of where you might need to use get as well all right so I can now get rid of all of this and instead of X you store host I can just save this dot post and get rid of all of this so this is my URL and this is my data all right so now since I have protected a lot of for from my contact component in the forum I need to import this form from its file which is basically this one and use nixon's to import this into my component so basically all of the functionality all of the data and methods which we have defined in this component are now available to over okay I think I did it at wrong place so this needs to go here and in contact component the mixin still go so all the methods and data that we have defined in the foreign component are now available to the context component all right code refactoring now we can refactor more now what we have remaining is methods that is remain related to the error messages and we can assign it to a new component let's name it form error dot view again a blank template or script and the name is form errors for the data this needs to return so what does this deal with it all deals with the errors objects so we will assign this errors object to its own or component which is form errors and this deals with a single object and we can also now copy all these methods from here to here all right so these are the methods and this computed property is also dealing with the errors so I will move this as well all right now the form errors what we can do is import here or I think it should belong to the form things so basically what we are doing is the form really has the form errors so we will assign it to its own class let's import form errors we'll just copy and paste this thing in fourth form errors from its own class and all right so now you look at the contact component which basically you need to create for any of your new form all you need to do is import the form component define the name of the component define the data which is there in your form and define the Axios method all is all that needs to be done but we have done a lot of refactoring so let's see what we have here so there are no new errors surprisingly I think we are good to go let's try it out we send messages though there are validation errors on the page with the submit button disabled we type on the fields and we send the message and we get the success so the refactoring worked absolutely fine one thing that needs to be tested is what if we get to server and we encounter any other error apart from 4:22 that is validation failure so let's just test that out so I'll just introduce any new errors so what we'll do is we will go to the contact and just comment out this line so this will basically allow our server to throw an error which we should catch so refresh this page send the message and yeah we get this error there was an error sending a message so if you see in this here you really get this message from the server and if you want to show this message on the screen which I don't really think you should but in case you are doubling they're dropping any technical application we really need to show the actual error that happened on the back end to get this message what you can do is go back to our forum and on failure what you can do is you can define a new field here which says error message assign it to blank and when you reach on failure this dot error message becomes your message that you are getting from the server so this is the message that we receive from the server and we assign it to error message go back to our contact form and this is where we are showing the error message here what we can do is we can just display this error message I think this is fine let's try this again yep we cannot show the error to the user one thing to note here is the issue that we haven't yet tackled that if there is already an error on the screen and somehow you fix the back end back to the normal and user submits the message you get the success message but the error message is still there on the screen and similar thing happens when you have a success message on the screen and user sends another message and somehow the back end breaks and you get back an error message then we are not clearing out the previous messages from the screen so what we really need to do is once you send the request before sending the request just set the properties to false so this will make sure before sending out a new request you are clearing out the previous error messages from the screen all right so now if we have this error messages previously on the screen now if I type something and send it okay I mean I think an Adobe Flash the page we have this success message on the screen we introduce an error I hit the screen again and success is gone and the error is there so that was about it I think we have covered a lot of aspects of beading with the in laravel and view and yeah that's about it thank you for watching

Channel: 5Balloons

Views: 1,467

Keywords:

Id: YigXj_ylJi0

Length: 48min 58sec (2938 seconds)

Published: Wed May 13 2020