Как правильно сделать валидацию формы input в react?

@jorge 

Валидация формы в React может быть реализована несколькими способами. Один из наиболее простых способов - это использование сторонних библиотек, таких как Formik или React Hook Form.

Однако, если вы хотите самостоятельно реализовать валидацию, вы можете сделать это следующим образом:

1. Создать состояние, которое будет хранить значения ваших полей формы.

1
2
3
4
5

const [formData, setFormData] = useState({
  name: '',
  email: '',
  password: ''
});

1. Написать функцию для обновления состояния при изменении полей формы.

1
2
3
4
5
6

const handleChange = event => {
  setFormData({
    ...formData,
    [event.target.name]: event.target.value
  });
};

1. Написать функцию для валидации формы, которая будет вызываться при отправке формы.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

const validateForm = () => {
  let isValid = true;
  if (!formData.name) {
    isValid = false;
    alert('Name is required');
  }
  if (!formData.email) {
    isValid = false;
    alert('Email is required');
  }
  if (!formData.password) {
    isValid = false;
    alert('Password is required');
  }
  return isValid;
};

1. Использовать фун

@jorge 

кцию validateForm в обработчике отправки формы:

1 2 3 4

const handleSubmit = event => { event.preventDefault(); if (validateForm()) { // выполнить отправку формы } };

На каждом поле input привязать функцию handleChange к событию onChange:

1 2 3 4 5

Это базовая реализация валидации формы в React. Вы можете расширить этот функционал, добавив дополнительные проверки, стилизацию ошибок и т. д.