React-hook-form. Проверка отдельного input на валидность

Question

Имеется некий input валидация которого реализована с помощью react-hook-form. При submit-e формы проверяется input, если условия(required, minLength, maxLength) не соблюдены input-у присваивается класс "input--error". Как реализовать механизм добавления класса("input--success"), при успешной валидации inputa.

<form onSubmit={handleSubmit(onSubmit)} className="profile__form">
    <div className={`input ${errors.name ? 'input--margin-error' : ''}`}>
        <label className={`input__label`} htmlFor="name">Your name</label>
            <input 
                className={`input__area ${errors.name ? 'input--error': ''}`} 
                type="text" 
                name="name"
                id="name"
                ref={register({
                    required: "Required field",
                    minLength: {
                        value: 2,
                        message: 'Minimum 2 symbols'
                    },
                    maxLength: {
                        value: 12,
                        message: 'Maximum 12 symbols'
                    },
                })}
                onFocus={(e) => e.target.labels[0].classList.add('input__label--active')}
                onBlur={(e) => !e.target.value ? e.target.labels[0].classList.remove('input__label--active') : null}
            />
            {errors.name ? <span className='input--error-details'>{errors.name.message}</span> : ''}
    </div>
    <button type='submit'>submit</button>
</form>

Answer 1

Самый простой способ может быть таким: делаем валидацию по нажатии каждой клавиши (mode: "onChange"), далее из хука useForm из FormState берём переменную isValid. И по ней можно устанавливать необходимый класс.

import React from "react";
import { useForm } from "react-hook-form";

const App = () => {
  const onSubmit = (data) => {
    console.log("data", data);
  };

  const {
    register,
    handleSubmit,
    errors,
    formState: { isValid },
  } = useForm({
    mode: "onChange",
  });

  return (
    <div>
      Input is Valid: {isValid.toString()}
      <form onSubmit={handleSubmit(onSubmit)} className="profile__form">
        <div className={`input ${errors.name ? "input--margin-error" : ""}`}>
          <label className={`input__label`} htmlFor="name">
            Your name
          </label>
          <input
            className={`input__area ${
              errors.name ? "input--error" : isValid ? "input--success" : ""
            }`}
            type="text"
            name="name"
            id="name"
            ref={register({
              required: "Required field",
              minLength: {
                value: 2,
                message: "Minimum 2 symbols",
              },
              maxLength: {
                value: 12,
                message: "Maximum 12 symbols",
              },
            })}
            onFocus={(e) =>
              e.target.labels[0].classList.add("input__label--active")
            }
            onBlur={(e) =>
              !e.target.value
                ? e.target.labels[0].classList.remove("input__label--active")
                : null
            }
          />
          {errors.name ? (
            <span className="input--error-details">{errors.name.message}</span>
          ) : (
            ""
          )}
        </div>
        <button type="submit">submit</button>
      </form>
    </div>
  );
};

export default App;

БЛОГ НА HUSL

React-hook-form. Проверка отдельного input на валидность

Ответы (1 шт):