0

Имеется некий 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>

1 ответ 1

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;
0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.