Move Validated Field with airSlate SignNow

Move validated field

in this tutorial we're going to learn how to validate form input when a form is posted to our server and how to re-render the page with error messages when there are errors as a recap for how we handle form submissions let's open up our editor and go to routes slash index dot J's we have defined a post request handler for sign up path using this user dot sign up handler so let's open up that handler by going to controller slash user dot J's if we look at the sign up post handler we see that we create a new user object without validating the input we receive from the form reg body email and reg body password fields are used directly to create the user and save to the database we're going to change that and validate these input fields first before saving the data and for that we're going to define a validator function for our form input so let's get started by installing the validator package by typing npm install the validator we are also going to use a package called lodash so let's add that as well and by - - save and press Enter let's commit our package that JSON just in case we made any changes so I'm going to type get comments packaged of JSON and package block JSON okay now let's go back to our editor and in the root directory my app let's create a new folder called validators and save that and we're going to create a new file called sign up jas here let's fight let's validator equals require validator and I'm going to create a local function cons validates create user fields option this is going to receive an errors object that is empty and we will populate it as we find errors in each form input field and we're going to receive the form input fields with the req parameter which is the request object so let's like if validator is email break body email here this mark stands for not so if this input is not an email then we will populate the errors object with the key email with a message please use a valid email so we're going to go over each input field like this with an if statement the next one for us is if not validator is ASCII we're requiring that we want the password to be made out of ASCII characters and we're going to pass the password with recta body that password if this doesn't hold true then we're going to populate the areas object with the password key to be passport please try another one we also want to enforce a password length so let's type if not validator is length break body Passport here we pass a length range object with minimum of 8 characters and max of 25 that again we're going to populate the errors or the password key please ensure that your password has a minimum of 8 characters now we're done with this function because the airless object was passed into this function it will be modified in place so we do not need to return the errors object now other than this basic string validation we need to make sure that there isn't an existing user with the same email as the address provided in this email form field for that we need to query the database so let's define a wrapper function exports validate user function tears rank type return models user find one where email is req body email and then we are going to value u if u is not equal to then we're going to populate the email key of the errors object email is already used please log in or reset your password now I need to introduce you a new concept on program execution when we define the body for validate user where we query the database this is an asynchronous piece of code so it will execute sometime in the future and we will get the results also sometime in the future and this first portion we defined the validate create user fields function is a synchronous piece of code which means each of these statements will execute sequentially now in order to validate the form fields we need both this function which is synchronous and this function which is a synchronous and we need to mix the two together for that we need to use a concept called promise and make the entire body a synchronous we're going to cover promises in the future in more detail but for the time being what you should know as a recap is that this piece of code is a synchronous and this piece is synchronous and in order to make use of both in a single function we need to define a promise which wraps the entire code in an asynchronous body so for that let's type return new promise function resolve reject and we're going to create the promise body let's cut this piece paste it here and indented inside the promise and let's make a call to validate create user fields there's rec and they will return the errors variable in resolve errors and let's not forget to include the models variable so let's go to the top and type less equals require dot dot slash models now let's save this file now let's go back to a controller slash user J s and import validate user so let's type cost validates user equals require dot validators slash sign up now let's go down to the sign up Handler and declare a new variable let errors equals an empty object and we're going to call return validate user errors and we're going to pass the req object that contains the input fields to be validated so let's move on and type then errors which is going to be the result we get from validate user and we're going to check whether the errors variable is populated with any values so let's type if not is empty errors which means the era's object has some values we're going to call a new method rerender signup and we will re render the form just as we will render the form for the first time using the show sign up enter except we're going to display the error messages that we have populated during the validate user call so let's add the errors variable here errors and we're also going to pass the usual req rest and next objects now this case covers the case where we have errors on the form and we will handle this successful case here as well so let's try it else and inside the else body let's cut and paste rest of the code and let's indent it so this means if there is an error we're going to e render the form and if not we're going to save the data to the database there is one more thing we forgot this is empty function is a call that's been provided by the lodash library we just installed so we need to type Const is empty cause require lodash now is a good time to define our rerender sign-up function it's going to be identical to show sign up with a few differences so let's copy and paste show sign up and we're going to make this a local function so let's buy a Const pre-render sign up now even though rerender sign up looks like a request handlers such as show sign up it's actually just a function call so we're free to modify its function signature with the order of parameters being passed normally in expressjs the request handlers have a particular order in their parameters in particular the request response and next objects are passed in that order so rerender sign up is called from the sign up handler at this point and we can pass the errors object as its first parameter and we're then going to pass that to the errors key so that errors can be displayed on the form when the page is rear-ended we also have another field called form data and form data is a name that we made up in particular for when there are errors on a form when we rerender that page we use form data to pass back all the input fields that have been modified by the user so that let's say when there are errors the user does not have to re-enter the same information to the other form fields again and again on each time the form is re-rendered so we saved the user time by passing back the data that's been entered already in a previous submission so in order to pass the data back to form data key we are going to use rec that's body if you recall if we go down to the signup handler when the form is submitted to us we have all the form input fields available to us in record body objects with the keys corresponding to the input names such as email and password so by passing back recta body after the submission we are effectively passing back all the input fields that have been submitted to us on the form submission so we're passing ragtop body back in form of the key form data now if you recall show signup is using user slash signup view and we're using the same view in rerender signup as well so we're going to modify the signup view to cater for both cases of the showing the form for the first time and also rerender in the form with errors and existing form information so let's go ahead and open up views slash user slash signup that bug to modify it and to use form data and errors fields now let's take a look at the first input field with the name email we can pass back existing values on an input field using the value property so here for the value property we're going to type form data that email we could potentially populate the value property of the password field as well but we're not going to do that as password is a sensitive field so let's add error message information now and let's create a new line under the first input and let's like if errors and there's that email which is the name for the input field we're going to type P that's small dot text danger these are classes from bootstrap and we're going to finally display the error message errors that email if you recall we create these messages in the validator function let's do the same for the password field so I'm going to create a new line under the password input field and let's type if errors and then errors dot password P dot small of the text danger there's the password now let's save our file and we should be ready to try what we've done so far now let's go back to our browser window and go to the slash signup browser and I'm going to type user at email we know that we have a user already with this email address so let's see what happens when we include that and for the password I'm going to type full character password which should also trigger around there so if I click on sign up I took it the form re-rendered with the right error messages notice how the validator has both detected that the email is already in use we've done this with the database query and the password length was also detected to be not valid that's checking all the changes we made it add validators we've added a new directory validators and we've implemented error and link and form validation for sign-up route