How to Create a Responsive Login Form with Form Validation in React

hi everyone in this video we will create this responsive validated login Forum in the access see it be quiet if you write something like this email address again that means if I write like this the reader has a remote scene for the password see that is okay it is a responsive so let's check it see for smaller devices it looks like this okay it is fully responsive so in this video we will create this in react JS so let's get started hey everyone in this video we'll create a responsive login Forum with validation okay in react.js I have created my react app and I created this file by the name of forum.ts in the enter file style.cs and light my code here I will start here let's start react function component export it will add something like this and let's write class name I will add a class name to this container and add another class name which this would be Forum container okay forum container and now we will heat our forum and here we should have passwords field first let's create a new and this would be class forum group okay and now we will create a label this would be email for and let's create an input field a type would be email okay whenever we would like to change enter the video in this name we should store that in a variable and we will create a state const email set email is equal to use State I will use you statehood for that by default that is empty in the Sim I will create now for the password okay this will be for password and password type should be password and now let's create one another for password and now let's click on change and then change we will just change the video up for email set email and E dot Target dot helium the same thing we will learn for the password okay we changed the value of them when we are entering so now let's create a submit button and on the top of this forum let's create log H2 login form and at the bottom let's create a link which would be for sign up now let's add some CSS design okay to this yes to looks better on the screen and then we will add validation to this forum so first I will Design This I will stop the video because then I will show you the code okay it will take time so I wrote this thesis code for our country for our forums okay for the container class for the upper Dew and for the Forum container and for the Forum and Forum Group after that for the input field and for the button H over and button so I root it looks like this okay I run the server and PM start after that it looks like this okay it looks like this so now let's add the validation okay whenever at least this button it should be validated so let's come here so for the validation I will create one another they were able to const errors and sit errors is equal to use State okay it is type of arrive it as we would like to store our um uh errors in this object now whenever we click on this the submit button okay so let's call submit on submit we will call handle submit let's create this function const handle submit equal to create an event yeah now let's write here event dot prevent default press default submission so after that we will call a function for the validation so let's sit our const errors is equal to okay it is equal to we will call validate function and we will pass uh okay we'll call the this function so let's create this function so let's create this function s to validate is equal to first we will create an object where we can store our errors and then if the email was empty so then we will attach a paint error dot email is equal to email is required is if if there was the text or the email was existed in the input field so now we will write our particular expression that slash space slash S Plus this means that without space accept all corrector then we have the art sign again slash S we will have the characters then we will have a DOT sign in our email then we will we should have again the slash S okay test method and we will pass our email to this so if the email was true so it will return um it will execute this lack of code but we will add not sign whenever it is true so it will Universe there is an error in the email for example space and something else so it will change we need to return false okay we need to turn false we will change that to the true to execute this block of code so here we will append Dot uh email is equal to email not matched okay if there was any error so it will display that to us else we will just make this here element empty okay there was no error we will make this empty the same thing so let's copy this for the password I will write something like this okay a password was not existed in password and also changes to the password now we will add the instead of the circle the password I will simply add a password that length was less than 8 so then it will execute this for us otherwise make the password felt empty and now we will later on this error turn here okay we will turn this error to this area so now we will see it errors our state to this errors now oh sorry okay if there was no error in our input field so let's write that the object dot keys we will pass our errors here dot length was equal to equal to 0 if there was no errors so then alert us okay and now we will display our errors on the screen so to display that let's write something like if error error start email existed so then display this dim for us display the errors dot email here for us and let's add a class name and that would be here and the same thing we will add for the password but it should change to the password let's change the color of this error to the read yeah let's check it now so let's refresh it looks let's press the plugin button see image required a password required let's set just use up we should change but our to check our own validation let's remove the HTML own validation built-in validation so now we will check it like in email not matched let's adjust sign like this not much again if I write like this something see the error has removed the same for the password if you have listing password not matched see that is okay so the ears has the remote [Music] so it was all about the responsive login formulas so let's make it a responsive okay it notice force you for smaller devices yeah so let's make it responsive let's come to the thesis at media screen and mix where it was 800 pixels thank you so then we will just change this in the form container let's come here for container where is that yeah photo container we will change the size of this where it should be for example 70 so let's change it see it looks like this now okay but let's make it make sure it was 900 it will width would be 70 am but c108 it will be 75 let's stick it now see looks like this smaller device so I hope this video helped you if you like this video please subscribe our YouTube channel and thanks for watching

Channel: Code With Yousaf

Views: 6,100

Keywords: React login form, Form validation in React, Responsive login form, React forms, React tutorial, Web development tutorial, Front-end development, Form validation tutorial, Login form design, User experience

Id: S6pp_bpgMJg

Length: 13min 22sec (802 seconds)

Published: Mon Feb 27 2023