BEST Ways to Handle and Validate React Forms without a Library

hello my friends today we are gonna create this erson form using reacts we will have some validation rules and if i don't write the required inputs it's gonna show these errors and we will do this without any library or any complex function it's only pure react html and css you will learn how to handle forms what are the best practices and different ways to change inputs how to prevent re-rendering why re-rendering is not a big deal for forms and so on ok i hope you will like it for more web development tips you can like the video and subscribe to the channel if you are ready let's get started okay i created my react app it's here app.js and inside there is only one view and my application is here and this is how it looks on the browser we are gonna create our form and inputs and by the way i see a lot of tutorials that use formic react form app library for the validation or any other libraries but guys if you don't know how they work i recommend you not to use any of them you should first learn how they work and how react nature is if you realize in my tutorials i tend to show things without any libraries we have created many apps that include sliders animations their own apis and they're all been pure react and i will do the same thing here of course libraries are great they make everything much easier but first just learn the pure version and after you can use anything you want and you will see you will feel more confident when you know how it works and you are gonna realize how many unnecessary things you are using so i will come here and delete this and i'm gonna create a form first like that i can give a class name it's going to be just app the main container and here i'm going to create my inputs you can do this here but i want to split them so i'm going gonna create another folder here and it's gonna be components okay so let's create our input component so i will say form input dot jsx or js so let's create our component function and i'm gonna give here a class name it's gonna be form input [Music] and firstly we are gonna have a label i can write here and the label we are gonna change this later and after that let's create an input to style this component i'm gonna create new file it's gonna be form input dot css and let's import this css file here same folder and form input dot css okay i can close here we are going to give some styles later and i can use this component here let me close this sidebar okay so let's call form input here form input and i'm going to duplicate this like that so let's see as you can see they are here they are all same so how we are going to change them it's really easy only thing we should do is writing here some props it can be placeholder let's say username i can copy this and paste here email full name for example and something else if we do that we can take this prop here i can directly structure this and write placeholder but i'm not going to do that that because we are going to take a lot of things like name label type error message on change function so basically i can write here just props and i can use like that placeholder it's gonna be props dot placeholder like that let's see right now let's take them here first and we can see better after that i will come here and say display flags align item center just file content center so i'm gonna center them but if i do that they're gonna stay here because we don't have any height so if i say height 100 vh it's going to be a hundred percent like that i'm gonna comment out these labels we are gonna give later and let's open form input css and for inputs i'm gonna say padding 15 pixels and let's give some margin from top and bottom 10 pixels left and right 0 pixel okay like that it looks really nice so how i'm gonna reach these values when i write here something we are supposed to get this value of course the first option use statehook for username for example if i say const username and set username and if i say use states and at the beginning it's gonna be an empty string and i'm gonna console.log this username and if i write here this set username method as a prop and i can use it here i'm gonna use on change event and i will say take the event props dot set username and we are gonna update this state it's going to be event target and value i will open up my console okay there is a problem i didn't okay set username equals set username i will refresh and i'm gonna write here something as you can see whenever i write any letter it automatically updates our state like that and since we use use statehook here it's going to re-render our component each time if i write here console.log again and let's say we rendered let's refresh the page again and i'm starting writing something and as you can see each time it re-renders this component actually it's not a problem but some of you might wonder if there is a solution for that of course there are two solutions for that firstly instead of use state you can use use ref hook i will say const username and it's going to be use drafthook and instead of username it's going to be use refwork so i can delete here i can pass something else here i will say maybe rougher and i'm gonna use this value so let's take it here we don't need this anymore i can delete and for input i can give ref here i'll say ref and props dot rever remember we are passing this like that you can change here you can say whatever you want and if we do that you are gonna see we are not gonna able to see our changes that because it's not working like you state it updates changes but it's not able to show these changes on our screen to understand this i can write here a button i will say submit and when i submit my inputs i will say here on submit method and i can write here any function let's say on submit or handle submit and let's create this function const handle submit and firstly i'm gonna write here e dot prevent default if you don't write this when you click this button it's going to refresh the page to prevent this we are writing this method and after that let's console log our username left here and i'm writing something and when i submit as you can see we have an object here inside we have an input element i can see its value which is john and if i change here as you can see it's not rendering i have some i can duplicate this and do the same thing for email full name or anything else and it works like that and one more thing we can do we don't need any ref here i can delete here also and let's delete here okay so what we can do we can actually use our form here and we can create new form data let's do that i will say const data is going to be new form data and i can use my event here basically i will say event dot target but how it's gonna target our elements to do that we can use here name attribute i will say name username and for others name email full name and something let's use them here i can say name and props dot name and that's all let's see what we have here we can't drag the console.log them but at least we can see what we have inside data i will write here something i will submit and as you can see we have form data here and inside you have entries but how we are going to reach these entries to do that we can use object methods i will say objects and from entries and data dot entries so let's see what we have right now i refresh again and i will submit and as you can see we can reach them right now email full name something and username awesome if you want to reach your values without rendering your component you can use usrev or these form functions but i see many peoples are worried about rendering components if you have states and you change them you shouldn't worry about rendering it's the nature of react you are changing something and it should be passed through the user screen immediately you can use it either way from data use rev but if you ask my opinion there is no problem to use use state here it's just one component and it doesn't affect any other components which doesn't include new state so it really doesn't matter if you render here or not so what i'm gonna do is changing here to use state i will open up i can delete this and let's delete here okay so what i'm gonna do for each input writing here like that email full name surname it's not a good practice that's because you can have more than i don't know 10 inputs and it could be really frustrating so what i'm gonna do is creating here a new object instead of username i'm gonna say values and it's gonna be an object and let's say username maybe more let's say email maybe birthday and i'm gonna use password and to confirm this password let's write here one more password confirm password and instead of writing them one by one i can basically use an array to do that let's create here our inputs array i will say const inputs it's going to be an array and it's going to include our each inputs here first one will be let's say id1 and name username type will be texts and placeholder like that and it's going to be username i can give also label we can use it finally and other things i'm gonna do later like that let's write for more it's gonna be email birthday like that of course you should change id because we are gonna use map and we should indicate our unique id password and confirm passwords like that of course their type will be password okay i can use them here i will say inputs it's going to be map and for each input i can call my component like that as i said if you are using map just indicate your key here it's going to be input dot id and this time i can delete here and basically pass everything inside my input id name type placeholder everything here and additionally i'm gonna give value and it's gonna be our each individual value here how i'm gonna do that i will say values and input dot name basically it's gonna take this object and search for this input name for example for name it's gonna be username which is this empty string for email it's gonna be this empty string it's gonna work like that and finally i can change my values here i will say const all change methods or handle change and i'm going to set my values here using this method i'll say set values and i'm going to spread the previous values and for each target name when targets dot name we are gonna update them by using their value event target dot value basically this target name is these names and this value is whatever we write here it's going to update them immediately so let's pass this function also i will say on change and on change okay let's take those props i can use this here let's delay it here and we can directly use props let's test structure them i will say const i can take everything which we are not using here inside input for example label on change function what else we have maybe id we don't need that and for other things and i will say others or i don't know input props and it's going to be equal our props like that right now i can use this label here let's say label and i can use those inputs directly here of course i should spread them again like that and let's create on change method and when we change something we can run this function like that okay let's see right now i will write here console.log my each element let's see what we have i'll refresh the page it looks pretty ugly but we are gonna change it as you can see they are empty right now i'm updating oops something is wrong with this confirm password let's see name confirm password ah okay there's a typo here and right now when i change it's gonna be here okay it works and when i submit i can directly reach this object and send to my api or db but what about validations we are gonna have some validations rules for example username is required it's going to be minimum 3 characters maximum 10 characters it should be just an email for example password should include one letter one number and one special character something like that and also our confirm password should be the same with this password how we are gonna do this it's really easy you don't have to use any library we are gonna use only html and css but first let's give some style firstly i'm gonna give background image here i will just paste my image here i just found free image on google and i gave some opacity for this image let's see it's like that but as you can see it's not centered and it doesn't cover our screen so i'm gonna write here background size it's gonna be cover and background position will be center okay it's much better you can increase or decrease this opacity as you wish like that is better for me and what about this form i'm gonna give background color it's going to be white like that i can give some padding heading from top and bottom and left and right like that i can give border radius let's say 10 pixels like that by the way i can give a title here let's say before this map i will say h1 tag and it's going to be register like that and for this title h1 color will be something like purple but darker one like that and i will just align this text text align center okay awesome let's take care of this submit button i'll say button i will give it a hundred percent let's give height and i will give padding i will say border none and background color will be this purple color and font color will be white i can't increase font size for the radius let's say 5 font weight will be bold and font size let's say 18 pixels and of course cursor pointer okay like that i can give margin margin top 15 and margin bottom let's say 30. okay good it looks really nice so what about those inputs i can close here for inputs i will say display flex and flex direction will be column they are gonna be vertical i have some and i can give some bit it's really small okay it's better five pixels and border will be one pixel solid and it's going to be gray okay it's better those labels let's write it here label font size will be 12 and color gray like that but what about our error messages i'm gonna add somewhere under input so let's write here a span and it's going to be error message of course we don't have yet but we are going to send them let's write them here i will choose all labels and before them i can say error message and we are gonna write them right now so what are our requirements for username for example i will say username should be 3 16 characters and shouldn't include any special character any special character it's going to be our error message and for email it should be a valid email email address and for birthday we are not going to have any requirements that because we are going to use type date here and it's going to automatically show us this interface and we can choose any date here like that so even if i try to type something it's not going to work so we don't need any message for passwords a 20 characters and it should include at least one letter one number and one special character and finally for this password i'm gonna say passwords don't match so i will come here and for our spam i will say font size 12 i can give some padding and color will be red like that so what i'm gonna do when i restart my application they are still here we shouldn't see them i should only see when those inputs are invalid so basically i will say display none for now and whenever our inputs are invalid invalid our spam will be display block okay perfect but how we are gonna add invalid functionality it's really easy we can just use html here only thing you should do is writing your requirements we are gonna use required attribute and it will be true it's an html attribute if i comment this out and for example right here required all error messages are here that because we didn't write anything for those items if i write here something as you can see it gets disappeared and here here like that basically i can give this attribute here like that and for others for email it's gonna be required it doesn't have to be required and password and confirm password and what else remember we have a rule here it should be 3 and 16 characters and shouldn't include any special character to do that there's an absolute attribute also which is pattern you can use string you can use rejects code what i mean by that i write here for example john as you can see arm error message here but if i write john as you can see it disappears if i write one more letter here for example it comes back like that so basically we can use any path here it doesn't have to be string we can use rejects so i'm gonna say it's gonna start with any capital letters or normal letters or any number zero to nine and also i can provide here my character limit and it's going to be 3 to 16. and i'm gonna end it like that oops it's going to be comma by the way okay let's see as you can see our error is here i will write something one two three and after three characters it gets disappear but if i add here any special character as you can see it comes back we shouldn't include any special character it should be only letters and numbers and if i exceed 16 characters it's gonna be here again it's that easy i'm not gonna explain everything about reject squads but you don't have to memorize anything just use google javascript on a letter reject code as you can see it's here javascript one letter one number one special character rejects code oops letter as you can see they are all here you don't have to memorize anything you don't have to learn rejects if you learn it will be much easier for you but as i said it's not that important so what about my mail address i can basically use here type email and that's all let's write here something correct and if i try to submit as you can see please fill out this field that because it's not an email so if i write here something gmail.com as you can see it's not here anymore awesome so what about passwords i will do the same thing i will say pattern and it's gonna be this code basically it says it should include at least one number one letter and one special character and other characters can be anything doesn't matter here and it should be between 8 and 20. let's try i will write here something but you can't see that because we said type password i will just turn this to text and after i'm gonna change it again i will write here something like that lowercase uppercase number and one special character like that you see how easy it is so basically you don't have to create any strange functions you don't have to write tens of lines for loop code only thing you should do is writing a pattern here so what about confirm password basically i can use pattern again but this time it's gonna be our password here so how i'm gonna reach this value it's really easy it's here remember we can use values and password if it equals it's gonna be the correct pattern so i will say values dot password like that let's see let me change it again it will be our password and i'm gonna change here as you can see this error is still here one two three and if i say hashtag it's gonna be disappeared awesome let's change it and here okay if i refresh the page as you can see they are still here because of required attributes but for the user experience it's not a good idea to write them at the beginning that because i just refreshed the page while you are showing me those errors i didn't write anything wait if i write something then show me this error but it's still not a good idea for example when i start writing something here it's gonna show up again but i'm still writing i shouldn't see that but if i go to another input then it should warn me hey you are in the another input but something is wrong here you forgot about that so how i'm gonna do this basically i need a functionality when i click this input and if i click somewhere else here or here or somewhere else we should basically mark these inputs we have an i have some events for that only thing i should do is writing here on blur event so how i'm gonna mark my input basically i can write here const focused focused actually it's not focused focused and leave but doesn't matter and use state and at the beginning it's gonna be false and when i click this input and click somewhere else it's gonna run on blur event here so basically i can update my state so i will say actually i can write function handle focus and let's write it here const handle focus and basically i can set focused to true okay we set our input as focused but how we are gonna use it in our css basically i can write here a condition i will say focused and it's going to be my condition if it focused let me open my console and elements here our form and our dues and this is our input and this is another one when i click this and click somewhere else i'm gonna write here focus true but it's a boolean it should be a string so basically i can say to string and let's see let me open up again i'm clicking here and clicking somewhere else and as you can see focus true but others are still same as you can see false false false and when i click here and click somewhere else for example here right now our password focused is true and basically then focus is true i can show this error let's use it in our css it's going to be not only invalid also focused will be true let's see i refresh they are not here i'm writing something as you can see it's not here i have one character but i can't see the error but if i come here as you can see it warns me user name should be 3 16 characters and same thing here i'm writing something but it's not an email but it doesn't burn me but if i try to choose my birthday it's gonna warn me where are you going it's not an email so if i correct here come it's not gonna warn me anymore and same thing here if i write two more characters it's gonna be disappeared awesome and if i delete this it's gonna come back again it's really really useful guys it's just an html and css and by the way we can also add red border for our invalid inputs i will copy this and i will see border one pixel solid and red and as you can see this border is red also perfect it works password it's incorrect i will correct them and as you can see our error is here that because i clicked there okay awesome but there's a problem the confirm password is our last element if i write here something and if i click here i'm not gonna click anywhere else it's only submit button here so even if i write here incorrect password it's not gonna warn me i'm gonna see this after submitting my form so it's nonsense how i can prevent this basically i can use another function here another event and it's gonna be on focus basically it works when we click on any item remember blur click and leave focus just one click so i will say if input props dot name equals confirm password i'm gonna set focus to true so i'll say my condition and set focus true it's gonna work only for confirm password let's try oops white screen probably i forgot function here yes it should be a function i will save again and there here some gmail.com and password and when i click here as you can see passwords don't match i will write here my correct password and it gets this happy awesome let's check what we have done we get our props and only thing we did here is handle focus function that's all and it's that short for app.js only thing we should be is writing our values objects and our inputs and here look at that we have just unchanged method here and that's all no validation functions no custom hooks no libraries it's that easy so we finished this project of course you should validate forms in your backend app also but it's not the concern of this video if you want just let me know in the comments so that's all if you learned something new today please like the video and subscribe to the channel and you can support llama there by using the join button or the link in the description below and don't forget to follow lama dev social media accounts ok i hope i will see you in the next tutorial good bye

Channel: Lama Dev

Views: 14,096

Rating: 4.9770379 out of 5

Keywords: react, react form, react form handling, react form validation, react input validation, react form hook, react login form, react register form, react tutorial, react for beginners, form handling, best practices, useState, useRef, formData

Id: tIdNeoHniEY

Length: 42min 37sec (2557 seconds)

Published: Sat Oct 30 2021

Reddit Comments

[u/nesikim]

source code: https://github.com/safak/youtube/tree/react-form