How would you implement data validation based on existing code?

Question

React

Hello. How would you implement such code (while discarding the check for the number of characters and the characters themselves).
I think this check...

checkInput(){
        var resultData = [this.state.firstName, this.state.lastName, this.state.nickName, this.state.email]; //данные формы регистрации
        var tr = false;
            
        for(var i = 0; i < resultData.length; i++){
            
            console.log(i +  " : " + resultData[i] );
            if(resultData[i] === null){
                console.log("entered the cicle");
                this.setState({checkText: "Не все поля заполнены!"});
                tr = false;
                break;
            }
            else(tr = true)
        }
        if(tr === true){

            if(!this.state.passWord || this.state.checkPass == null){
                this.setState({checkText: "Поля с паролями не заполнены!"});
                console.log("1");
            }
            else if(this.state.passWord !== this.state.checkPass){
                this.setState({checkText: "Введённые пароли не совападают!"});
                console.log("2");
            }  
            else{               
                this.setState((state) => {
                    return {checkText: "Готово"};
                });
                this.sendData();  //отправляет данные на сервер
            }
        }    
    }

Answer 1

Wow. Well, use Formik in conjunction with Yup.

import React, { useCallback } from 'react';
import { Formik, Form, useField } from 'formik';
import * as yup from 'yup';

const initialValues = {
  firstName: '',
  lastName: '',
  nickName: '',
  email: '',
  password: '',
  confirmPassword: ''
};

const validationSchema = yup.object().shape({
  firstName: yup.string().required('Имя является обязательным'),
  lastName: yup.string().required('Фамилия является обязательной'),
  nickName: yup.string().required('Имя пользователя является обязательным'),
  email: yup
    .string()
    .email('Введенное значение не является почтой')
    .required('Почта является обязательной'),
  password: yup
    .string()
    .min(8, 'Минимальная длина пароля 8 символов')
    .required('Пароль является обязательным'),
  confirmPassword: yup
    .string()
    .oneOf([yup.ref('password'), null], 'Пароли не совпадают')
    .min(8, 'Минимальная длина пароля 8 символов')
    .required('Пароль является обязательным')
});

const ExampleField = ({ name, label, ...props }) => {
  const [field, meta, helpers] = useField(name);

  return (
    <label>
      {label}
      <input
        name={name}
        value={field.value}
        onChange={field.onChange}
        onBlur={field.onBlur}
        {...props}
      />
      {meta.error !== undefined && meta.touched && <div>{meta.error}</div>}
    </label>
  );
};

const ExampleForm = () => {
  const handleSubmit = useCallback((values, helpers) => {
    console.log(values);
    helpers.setSubmitting(false);
  }, []);

  return (
    <Formik
      initialValues={initialValues}
      validationSchema={validationSchema}
      validationOnBlur
      onSubmit={handleSubmit}
    >
      {({ values, errors, touched, isValid, isSubmitting }) => (
        <Form>
          <ExampleField label="Имя" name="firstName" />
          <ExampleField label="Фамилия" name="lastName" />
          <ExampleField label="Имя пользователя" name="nickName" />
          <ExampleField label="Почта" type="email" name="email" />
          <ExampleField label="Пароль" type="password" name="password" />
          <ExampleField label="Подтверждение пароля" type="password" name="confirmPassword" />
          <button type="submit" disabled={!isValid || isSubmitting}>
            Отправить
          </button>
          <pre>{JSON.stringify({ values, errors, touched }, null, 2)}</pre>
        </Form>
      )}
    </Formik>
  );
};

Example .

Answer 2

I would use the library. Nafig need to come up with something that has already been invented.
For example, such https://github.com/jquence/yup
Well, or some other, the main thing is that it should be about data validation.