Getting Started With AdonisJS 4.0 [4] - Add Post & Validation

Key Takeaways

alright guys so we have our ad post form now we need to add function to this so it's getting submitted to slash posts as a post request so we need to catch this in our routes so let's go to start route CAS and we'll go down here and we'll say route dot post because it's gonna be a post request and it's gonna be two slash posts and then we want to link this to the post controller dot create method which we haven't created yet so let's save that actually you know what let's call this store I think that's a better convention so we're storing the post all right now let's go to the controller and we'll go right on it under the add method and we'll say async store and let's see what we're gonna do here so this is gonna take in a couple things okay we want request and response and then we also want session alright we're going to be using flash messages so that when we submit a post after we redirect we want a message that says post submitted or something like that all right we're also gonna be using validation using a validated provider but I'm gonna get to that after so once this is submitted let's say Const Post equals new post like that okay so we're creating a new post instance and then let's say post dot title equals and the way that we get the form values is using that request object which has an input method and we can get the title okay we also want to get the body and add that to the post so request input body all right then we just want to save it now we need to use a weight here so we're gonna say a weight post dot save okay now we want to set a flash message so to do that we use session dot flash and then in here we pass in an object and we say notification and then whatever we want to say I'm gonna say post added okay and then we just need to return response dot redirect and wherever we want to go which is gonna be the posts page all right now setting the flash message is one thing but we need we also need to output it so since we're going to the post index page let's go to that view which is post index dot edge and we're gonna go right below the title and the syntax for this is going to be an if statement so we want to do a tiff and in here we want to say old that's the method we want to run and then notification okay and then we want to end if and inside here we're going to put a div with a class of alert and a class of alert danger okay which are bootstrap classes and then we just want to put double curly braces old notification like that all right so let's try this it should actually add a post so we'll reload let's say post three this is post three and submit and there we go post added oops I I put alert danger I should have this needs to be alert success so it's green okay so one thing that I want to do now is add some validation because right now I can submit nothing okay so to do this we need to install the validator providers so we're gonna go down here and say npm install at adonis jas slash validator okay this isn't included by default now when we add a provider we need to register it and we do that in the start and then app.js file so i'm what i'm gonna do is put a comma here and let's just copy this down and change this to validate or provider okay so now we can use it so we'll close this up let's go back to our controller and we need to bring in that validator so up at the top here we're gonna say const validate equals actually we need to use destructuring so we need to add curly braces around that and then we'll set that to use validator look I put some semicolons in here I knew that was gonna happen all right so now we brought in that validator provider so now we want to use it so down in the store method we're gonna go to the very top before we do anything with the database and we need to add our validation so we'll say Const validation set that to a weight validate and we want to pass in request dot all and after that request on all method we want to put a comma and then open up some curly braces and put in our fields so title and then the rules we want so I'm gonna say required and then we can separate rules with pipes I'm gonna say minimum of three characters another pipe and a maximum of 255 characters all right and then for the body I'm just gonna say required and men three all right just like that so that defines our rules now we need to check to see if that fails so we're gonna say if validation dot fails okay if validation fails then we want to session dot with errors and then pass in here validation dot messages and then we want to dot flash all alright so each each field will have its own little flash message okay then we just want to return we want to reload the same page so response dot redirect and back okay which will just reload the same page the form so that looks good let's go ahead and save that now if we were to go over here and try to oh what happened let's see what happened cannot find provider hmm should did I not save it let's see let's go back to start app J s oh I have auth providers here this should actually be validator all right save that that should fix it good so now if I try to submit without entering any any data it's not letting me but the messages are not showing so we need to go back to add dot edge and we need to add some stuff here okay and some of this looks a little weird but it's just what we have to do so first of all we need to put a value so value for title and this is gonna be double curly braces and then again we want that old method passing the name of the field which is title and then an empty string so what this will do is if there are errors and we have something in here it'll make the con it'll make the text stay in there all right now we want to do the same for the body so I'm going to copy the the curly braces and put it inside here and then just change that to body all right now to show the actual errors we're going to go to this first title input go right underneath it and we're gonna use this L if syntax alright so we need e l uppercase I F okay and then here we're gonna put in whatever we want to display the error so I'm going to use a span with the class of text - danger okay that'll make the that'll make the text read span and inside the span we want money signed self alright now we want to go to the end here and put in another parameter which is going to be get error for so get our four and then we'll pass in the name of the field which is title alright then we want to pass in another parameter of has error four so has error four and pass in title okay and that will display the error now we want to do the same thing for the body so I'm gonna copy this go right under the text area paste that in and just change these two to body so now let's go ahead and reload and let's try to submit we get required validation failed on title I put something in there and submit required validation on body and notice that this stays in there that's because of this value we put here so let's go ahead and add another post we'll say post for this is post four submit and there we go so now we have a little bit of form validation alright so in the next video we're gonna get to update these posts we want to add that we want an edit button where we can click edit go to a form update it and then we also want to add a delete button so that we can delete posts