Handling forms | Mastering React: An In-Depth Zero to Hero Video Series

Summary

In this React JS tutorial, the instructor guides beginners through form handling in React from scratch. The video covers creating forms using Bootstrap for styling, capturing form data with useRef, and validating inputs based on requirements. It demonstrates how to prevent page refresh on submit, display error messages, and conditionally enable the submit button. The instructor also suggests a task to enhance the form by disabling the submit button until the form is valid and showing error messages dynamically.

Takeaways

• 😀 The video is part of a React JS tutorial series aimed at beginners.
• 🔑 The focus of this video is on form handling in React, including creation, validation, and submission.
• 🛠️ The presenter uses Bootstrap for styling the form fields to enhance user experience.
• 📝 Form handling in React can be managed without third-party packages by writing custom logic.
• 🏗️ The form creation process involves using HTML form elements and Bootstrap classes for layout and styling.
• 🔍 Form validation is crucial and involves checking for required fields, email format, and user agreement to terms.
• 🔗 The video demonstrates using `useRef` for form field values and `useState` for managing error messages.
• 🛑 The `preventDefault` method is used to stop the default form submission behavior which refreshes the page.
• 📢 Error messages are displayed to users to indicate what fields need to be corrected.
• 🔄 After successful form submission, the form fields are cleared, and error messages are reset.
• 💡 The video ends with a challenge for viewers to enhance the form by disabling the submit button until the form is valid and displaying error messages dynamically.

Q & A

What is the main focus of the video series 'React JS - Zero to Hero'?

The main focus of the video series 'React JS - Zero to Hero' is to teach beginners how to learn React JS from scratch.

What was the topic covered in the last video of the series?

In the last video, the topic covered was how to invoke HTTP requests in React.

What are the three steps involved in form handling in React as mentioned in the video?

The three steps involved in form handling in React are form creation, form validation, and form submission.

Why does the instructor choose to use Bootstrap for styling the form fields?

The instructor chooses to use Bootstrap for styling the form fields because it allows for easy styling and is a widely used framework for front-end development.

What is the difference between using 'button' and 'submit' as the type for a button in a form?

A 'button' type is a generic button that can be used for various purposes with additional functionality added using JavaScript, while 'submit' type is specifically used to submit the form and has the default functionality of submitting the form data.

How does the instructor prevent the default behavior of form submission which is page refresh?

The instructor prevents the default behavior of form submission by using the 'preventDefault' method from the event object.

What is the purpose of using 'useRef' in the context of form handling in React?

In the context of form handling in React, 'useRef' is used to access the form fields' values without causing a re-render of the component.

What is the validation requirement for the email field as per the video?

The validation requirement for the email field is that it should be in a standard email format, which is checked using a regex pattern.

How does the instructor handle error messages in the form validation process?

The instructor handles error messages by maintaining state variables for each error message and displaying them next to the respective form fields when validation fails.

What is the final step the instructor takes after form submission in the video?

After form submission, the final step the instructor takes is to clear the form fields and reset any error messages.

What task does the instructor give to the viewers at the end of the video?

The task given to the viewers is to develop the same form with a disabled submit button that gets enabled only when the form is valid, and to display all error messages as the user interacts with the form fields.

Outlines

00:00

📚 Introduction to Form Handling in React

This paragraph introduces the topic of form handling in React JS, aimed at beginners. The speaker explains the purpose of forms in collecting user data and the three-step process involved: form creation, validation, and submission. It contrasts form handling in React with other frameworks like Angular, which have separate modules for forms. The speaker demonstrates how to create a form using React and Bootstrap for styling, including various form elements like text fields, email, number fields, dropdowns, checkboxes, and buttons. The focus is on creating a functional form without third-party packages and using Bootstrap's styling capabilities.

05:01

🔍 Form Validation and User Input in React

The second paragraph delves into the validation of form inputs in React. It discusses the use of useRef to access form field values and the importance of validating user input based on business requirements. The speaker outlines a simple validation scenario where certain fields are required, the email format is checked, and a checkbox must be checked for form submission. Error messages are displayed to the user, and states are used to manage these messages. The paragraph also covers the process of clearing error messages and ensuring that the form only submits when valid. The speaker tests the validation logic and discusses the importance of highlighting error fields and focusing on them for user convenience.

10:03

🚀 Form Submission and User Feedback

The final paragraph focuses on the form submission process and user feedback. It describes how to check the validity of the form before submission and how to handle the form data once the form is valid. The speaker demonstrates a simple form submission process that logs the form values to the console and clears the form fields after submission. Additionally, it discusses enhancing user experience by highlighting error fields and focusing on them. The speaker concludes by assigning a task to the viewers to create a form with a disabled submit button that only enables when the form is valid and displays error messages dynamically. The video ends with a call to action for viewers to like, subscribe, and support the channel.

Keywords

💡React JS

React JS is a popular open-source JavaScript library used for building user interfaces, particularly for single-page applications. It is maintained by Facebook and a community of individual developers and companies. In the video, React JS is the main focus as the series is designed to teach beginners how to use React JS from scratch, with the script detailing various aspects of form handling within this framework.

💡Form Handling

Form handling refers to the process of managing form data in web applications, including creating, validating, and submitting forms. In the context of the video, form handling is a crucial part of the tutorial where the instructor explains how to create, validate, and submit forms using React JS, highlighting the importance of this process in collecting and processing user data.

💡HTTP Requests

HTTP (Hypertext Transfer Protocol) requests are messages sent from a client to a server to request access to a resource. In the script, it is mentioned that the previous video explained how to invoke HTTP requests in React, which is essential for sending data to a server when a form is submitted.

💡Bootstrap

Bootstrap is a widely used open-source CSS framework that helps developers design responsive and mobile-first websites. In the video, Bootstrap is used to style form fields, demonstrating how it can be integrated with React JS to create visually appealing user interfaces.

💡Form Validation

Form validation is the process of checking user input to ensure it meets certain criteria before it is processed or stored. In the video, form validation is a key step in the form handling process, with the instructor showing how to validate form fields such as full name, email, and department to ensure they are not left blank and meet specific format requirements.

💡Event Handling

Event handling in web development refers to the way browsers respond to user actions, such as clicks or key presses. In the script, event handling is discussed in the context of adding functionality to buttons and form submissions, with examples like using onClick handlers to clear form fields or onSubmit handlers to prevent page refreshes.

💡State Management

State management in React refers to the way components store and update their state. The script mentions the use of `useState` and `useRef` for managing form field values and error messages, illustrating how state management is integral to form handling in React applications.

💡Regular Expressions (Regex)

Regular expressions, or regex, are patterns used to match character combinations in strings. In the video, regex is used to validate the email format, showing how it can be employed to ensure user input adheres to specific standards.

💡Conditional Rendering

Conditional rendering in React allows components to render differently based on the state or props. The script discusses how error messages are conditionally rendered based on the validation status of form fields, demonstrating the dynamic nature of UI updates in React.

💡Form Submission

Form submission is the process of sending form data from the client to the server. In the video, form submission is the final step in the form handling process, with the instructor explaining how to prevent the default page refresh behavior and instead handle the submission using JavaScript, potentially to invoke an API.

💡Dynamic Class Names

Dynamic class names in React are used to conditionally apply CSS classes based on component state or props. The script describes how to dynamically add an error class to form fields that have validation errors, highlighting the interplay between React's state management and CSS styling.

Highlights

Introduction to the series and purpose: React JS for beginners, covering form handling in this video.

Forms are used to collect user data, which is then processed when submitted.

Form handling in React involves three main steps: creation, validation, and submission.

Difference between React and Angular: React requires custom code or third-party libraries for form handling.

Creating a form with Bootstrap for styling: Installed and imported Bootstrap for easy form design.

How to create form fields in React using JSX, including labels and inputs with Bootstrap classes.

Using different input types: text, email, number, dropdown, and checkbox.

Explanation of button types: submit for default form submission and button for custom behavior.

How to prevent the default form submission behavior using `event.preventDefault()`.

Difference between useState and useRef for handling form field values; useRef is suitable when UI updates aren't needed.

Basic form validation: Ensuring required fields are filled and validating email format using a regex pattern.

Showing error messages for validation and updating states dynamically to display these messages.

Adding focus and highlighting to fields with validation errors, improving user feedback.

Form reset functionality after successful submission, clearing both form fields and error messages.

Task for viewers: Disable submit button until the form is valid and display error messages in real time.

Transcripts

Hi Friends

Welcome back to React JS - Zero to Hero series.

This series is for beginners who wants to learn React JS from Scratch.

In the last video I have explained about how we can invoke HTTP requests in react.

In this video I am going to explain about form handling in react

Let's start.

Forms are used to collect information from end users.

When the user fills out a form and clicks the submit button, the form data will be sent

for processing.

Form handling is about how you handle the data when it changes value or gets submitted.

Usually, we can divide the form handling into a 3 step process.

Form creation, form validation and form submission.

And, in frameworks like Angular, we have a separate module for handling forms.

But in react, either we need to go for some third party npm packages or we can write our

own logic.

In this video, I am going to explain you how we can do form handling in react using our

own code.

For that I have created a react application.

I am going to use bootstrap, because using bootstrap we can easily style our form fields.

To use bootstrap, I need to first install bootstrap.

I can install bootstrap using this command.

Now, bootstrap is installed inside node modules and so we can use this bootstrap dot css.

Let me import the bootstrap dot css in index dot js.

In app dot js, I am just having a h2 tag and then a div which is having a class form container.

And I have applied some CSS.

Let me start the server.

Now we can see this.

Ok, like I told before, our first step is going to be form creation.

So, let me introduce a form element.

Inside that, I am going to create our first field.

In bootstrap, we have a class called form group, which can be used to group the form

fields like label and input box.

So, first let me create a div with class name as form group and then inside that let me

create a label.

Please note that, in JSX we have to use htmlFor instead of for.

And then, let me create an input type text with an id.

To this, I can add the bootstrap class name form control.

Ok, our first field is ready.

Let me quickly create another field for email, another number field for age, a dropdown for

department and a checkbox.

For checkbox alone, we need to have a little bit different structure.

I have added this to style it correctly.

Finally a submit button of type submit.

I have a question here, can you think why I am saying that we need to create a button

of type submit.

Why not a button of type button.

A button is just that, a button, to which we can add additional functionality using

Javascript.

In the mean time, a submit input type has the default functionality of submitting the

form.

Let me create another button, let it be of type button.

I am going to use this button to clear my form fields.

So here also, instead of button I can use the type as reset.

But I wanted to show you how we can reset our form manually and so let me keep this

type as button.

Ok, now if I click this button, nothing happens because there is no event added.

Let me create a function and let me add that using an onClick handler.

Now also, we are not seeing any difference.

But if I have a console log inside this function, we can see that on clicking this button.

Ok, let me click this button, now we can see a question mark is added in the URL, that

means something has happened.

Let me create a function and let me bind that to this form using an onSubmit handler.

Now, if I have a console log, and click this button, we can only see the console message

only for a fraction of second, because every time when we click the submit button, the

page refreshes.

That is the default behavior.

But we can use the prevent default method from the event to change the default behavior.

Like this.

Now, if I click, we can see the page is not getting refreshed.

Hope you understood.

Ok, now we have created our form.

Next step is to validate the input.

For that first we need to find a way to get the values from the form fields.

In react, we have already seen either we can use useState approach or useRef approach.

For this demo, we are not going to change anything in the UI, based on the form fields,

we are just going to collect the values and send for processing.

To be more specific, we are just going to log those values in the console.

That's it.

So we don't want to go for useState approach.

And so, let me create useRef for each field and then let me bind that to the respective

form fields.

Ok, now we can access these fields and their values.

So, let's do form validation.

For that I am going to create a separate function.

Inside this function, Let me get the values of each field and let me store in some variables.

Please note that for all input fields and dropdown I have used respective ref dot current

dot value.

But for checkbox, I have used ref dot current dot checked.

This will give us true or false.

Now we need to write some logic to validate the values based on our business requirement.

Let me define our requirement.

Let me keep it simple.

Full name, email and department fields should be required.

That means they cannot be left blank.

And, email should be in a standard email format.

Finally, user has to check this checkbox to submit the form.

And, we are not going to test all the negative scenarios like entering number in name field,

etc.

That will deviate us from learning the concept.

Ok.

And we need to show the error messages to the end user.

For that we need to maintain few states.

Let me create those.

Initially, I am assigning them as empty string.

And when there is an error, I am going to assign the respective error messages.

For example, our first requirement is going to be full name is required.

So, let me check whether full name dot trim is equal to empty string.

If it is so, let me set the error message as Full name is required.

And then, let me come to this form group and here let me add a span with class as error

and let me show the message.

Even for this error class, I have already added css.

Ok, now we can call this function inside our handle submit function, so that we can test

this validate form function.

Ok, I am going to submit the form without any value.

And so, we can see the error message.

Similarly, let me do this for the email field.

Ok, let's test.

I am going to submit the form without entering any values.

Now it is throwing error full name is required.

Now, let me enter some value for full name and then submit, now the email is required

error is showing but the full name error is not cleared.

So what we can do, inside this block, we can reset the full name error.

Now, we can see it is working.

So we have to follow this approach for other fields as well.

Ok, our next requirement is to validate whether the email is in valid format.

For that, let me create a new function called validate email which accepts email as parameter

and it test that against this regex pattern.

This is the pattern for validating an email format.

If the test is success, let me return true or otherwise let me return false.

Now, I can call this function and let me pass the email.

If this is going to fail, let me set the email is not valid error message.

Here also, let me reset the full name error message.

Now, let me test this.

Ok, it is working.

Let's move to the next requirement which is department should not be blank.

This is similar to the full name requirement, let me copy this and modify according to our

need.

Finally, we need to validate whether the user has checked this checkbox or not.

For that, I can simply check like this.

If not agreed, I am clearing the department error and setting the agreed error as please

agree with terms and conditions.

Ok, let me test it.

After the checkbox is also checked, we need to clear the agreed error message.

And so, let me introduce an else block and let me clear the agreed error.

Ok, let me test it once.

It is working.

Now, we need to proceed with form submission, if the form validation is success.

For that, first let me declare a variable inside validate form function and let me initialize

that as false.

And, inside else block, let me change that to true.

Finally let me return that variable.

So, if the form validation is success, this method will return true otherwise false.

So, in handle submit function, let me get that in a variable and let me check that variable

and only when it is true, I am going to call another function called submit form.

Let me also create the submit form function.

Ideally, this is the function in which we can build our payload and invoke the API.

But for now, let me console log the values of the form fields.

Ok.

Let's test it once.

So, when the form is not valid, form is not getting submitted.

And when the form is valid, we can see the console logs.

That means the form is getting submitted.

Ok.

After the form is submitted, we need to clear the form fields.

So, after this, let's call reset form function.

And in reset form function, we can reset the form field values, like this.

Also, we need to reset the error messages also.

Let's test it once.

Ok.

It is working.

It would be good if we highlight the field which is having error and focus that field

as well.

To highlight the field which is having error, we just need to dynamically add the class

err.

Which we can add it using the template string.

Like this.

I have already added CSS for this.

And so, we can see the field having error is highlighted, both the color of the label

and the border are changed to red.

And to focus the field, we can use the respective ref dot current dot focus.

Let me test it.

It is working as expected.

Hope you understood, how we can handle forms.

Let me give you a task.

You can develop the same form.

But you can disable the submit button.

You have to enable only when the form is valid.

Also, display all the error message when user types or selects in the form field.

Try this, if you need the solution code, you can get it from this repo.

The link is also available in the description.

That's all for today.

Please like this video.

Subscribe to my channel and support me.

Thank you.

Bye.