Form Validation in React JS || Input Validation React JS || React Form Validation onSubmit || React

hello everyone this video i will show you how to create input field validation in react like this and if first name and last name is cmt means if i click submit button it will show error like first name cannot be empty and last name cannot be empty okay if i type first name means error will be hided if i type last name is error is also hide it if i uh and also if i remove last name again it will show error like last name cannot be empty if i type and if if i remove first name means first name cannot be empty okay if both the first name and last name is fill that if i click submit means console will be printed the first name and last name let's start i already created a react project and this is js file and this is css file i already imported that from form.css file here okay now i'm going to create a new state for getting first name and last name okay accounts this is first name and this is q state initially it should be in empty yeah it used it is imported here and also i need to create one more for last name and this is last name and i need to create a form here okay and inside the form i need to create a div this is input okay and close that input here i'm going to create on change and initially i need to set first name e dot target dot value okay i'm going to set the input field this input field value in this first name okay i need to create one more input field for a last name and this is last okay last name yeah oh it's error last name copying this and paste it here oh okay and save this and also i need to create a button first i get a div inside the duo i need to create a button okay it should be submit save this and also i need to create a label here sorry and this is first name can't be empty first name cannot be empty i need to put this after this this for a second i mean it's last name okay save this yeah i get the input field and also error message the side style is not good so i need to change the style of this this is instead i need to get all the content in center so i need to text all in center and also yeah say this yeah all content in center i need to add a div padding it is i think it's i will give eight okay yeah this is fine and also i need to change the input field height and width this is height height is 30 px and also width is also 30 percentage okay 30 yeah sorry this is 30. oh thirty percentage this is fine and also i need to change the button style it should be height in 30 px and also with this 20 percentage yeah this is fine now so i'm going to change the label color it's in sorry color red yeah this is fine and style is good okay this is this is fine now i'm going to create a form on submit and here i'm going to create handle submit i'm going to copy this and create a function after this and here now i'm going to console this value sorry i need to run this console the value and this is first name and last name yeah save this and refresh this browser if i type first name and last name and if i click submit means yeah it's printed and browser is refreshed so i need to add prevent default e dot prevent default and save this yeah if i type first and last name and if i click submit means yeah console will be printed and i i need to remove this first name and last name okay so i'm going to create a [Music] and state i'm going to create a state for a show and hide error okay this is your state sorry and usually it's in false okay yeah i'm going to check if first name dot length is equal to 0 our last name dot length is equal to 0 means set error true okay i'm going to copying this error and [Music] if i i'm check if the error is true means show the label else it won't show okay and also here initially error is false so did not print the errors it will print the empty string okay save this yeah refresh this yeah initially the error message will be hided if i click submit button means it will show error and if i type anything means this error is not hided so now i'm going to add that and here i'm going to check and the first name dot length less than or equal to 0 and also here and last name dot length is less than sorry less than or equal to zero and yeah refresh this browser this is ready if i type first name and if i click submit means yeah the error will be showing here and if i remove the first name both the content will be error if i type last means uh here last name error will be hided but the console is printed every time okay so i'm going to check if here if this console is printing okay in the console now i'm going to check if first name and last name is field i will show the console else it won't show okay here now i'm going to check sorry change the console into first name and this is last name okay and i need to print last name in new line okay slash new save this okay i refresh this page i need to add a placeholder sorry we forgot to add a placeholder this is first name this is last name and save this yeah this is fine if i click submit button means console also not printing and first name cannot be empty and last name cannot be empty will be error will be printed if i type first name so error if i submit means it did not print the console if i type last name and if i remove last name and server will be showing you but if i type something in the last name error will be hided if i click sum it means first name and last name will be printed that's it for this video i will see you next video bye

Channel: Coding Comics

Views: 44,104

Keywords: input validation in react, form validation in react js, form validation react, input field is empty show error in react js, onsubmit form is empty show error in react js, check input validation in react, form validation in react hooks, react form validation, react input validation, react form validation on submit, custom form validation in react js, form validation in react js using hooks, empty field validation in react js, onchange validation in react js, form validation in js

Id: rZpc7HkmF5Q

Length: 10min 8sec (608 seconds)

Published: Sun Apr 24 2022