react-forms-tutorial/

[utterances-bot]

React Forms Tutorial: Access Input Values, Validate, and Submit Forms

A step by step tutorial on how to access input values, validate, and submit forms in React.

https://dmitripavlutin.com/react-forms-tutorial/

[makkabi]

Thank you as always! But please add some important accessibility requirements - labels need to be connected to the input elements via for-atribute, which is htmlFor in React, which should point to the id of the form. (Alternatively, you can wrap the input inside an label.)

[panzerdp]

Thank you as always! But please add some important accessibility requirements - labels need to be connected to the input elements via for-atribute, which is htmlFor in React, which should point to the id of the form. (Alternatively, you can wrap the input inside an label.)

Thanks for your feedback @makkabi.

I want to keep the HTML as simple as possible to make the code easier to understand. But as a good practice, in production, it makes sense to connect the labels and inputs.

[minemax-ua]

I recently saw this version of onSubmit:

 onSubmit={async (data, event) => {
...
}

What is it, really...?

[dawitMesfin]

You are good teacher, but in this post the function set is completely incomprehensible for a beginner programmer. All of the sudden you defined a complex set method. So if you can add a little clarification for the set method.

[panzerdp]

You are good teacher, but in this post the function set is completely incomprehensible for a beginner programmer. All of the sudden you defined a complex set method. So if you can add a little clarification for the set method.

If you're trying to use React forms, and generally React, you should have basic JavaScript and functional programming understanding. This post is meant to teach React forms, but not basic concepts.

[dawitMesfin]

If I were you, first I would write a handler for each form control then after I showed that the tedious writing of handlers for each form controls I would write the set method and the advantage of it over writing tedious handler for each form control. Thank you.

[panzerdp]

If I were you, first I would write a handler for each form control then after I showed that the tedious writing of handlers for each form controls I would write the set method and the advantage of it over writing tedious handler for each form control. Thank you.

There are 2 paragraphs explaining in brief what the function does:

set(key) is a higher-order function that returns on change handlers. Its purpose is to avoid writing manually on change handlers for each field in the form.

For example, set('name') returns a handler that updates values.name property when a change in the Name field happens.

This explanation should be more than enough if you have basic knowledge.

Anyways, thanks for your feedback!

[dawitMesfin]

Thank you for your prompt reply Dimitri, actually I am a react developer, not novice for javascript. But my suggestion comes from that I know a lot of newbie for javascript who visit your website. So if you make your post more explanatory and full of details at least they would get overwhelmed upon their visit. And I am learning a lot of javascript quirks from you. To be honest for me you are one of the mavens on javascript-the most difficult language to comprehend fully.

[sum1275]

Hello sir I want to know how to validate the optional fields only when the user enter value in it. If not entered any value it is not a matter of concern

[panzerdp]

Hello sir I want to know how to validate the optional fields only when the user enter value in it. If not entered any value it is not a matter of concern

@sum1275 You can do it with regular HTML format attribute on the input element, without marking it as required.

Check this demo: if you enter a value into the field, it will validate it to be an email. If you keep the input field empty, it will just pass the validation.

[ellievi]

Thank you so much! It helped me a lot to comprehend the code's phases to create a form