How to make it so that when submitting the form, an error message is written next to each incorrectly filled input?

Question

React

Hello, here is an example of a form:

let's say we just click on the button. Under both inputs, an inscription should appear stating that these fields are required. if some field is incorrectly filled in - the corresponding message:

Tell me how to do it? Thank you.

Answer 1

The pattern attribute will help you , you can write a regular expression in it to validate the field, and also specify a message that should appear if the field is filled incorrectly (there are several ways).
Ready list of regular expressions see here.

Answer 2

You can look towards specialized libraries.
For example https://github.com/jquence/yup
Integrates well with form libraries like Formik and react-final-form

Answer 3

To create forms in React projects, use Formic.
https://jaredpalmer.com/formik/