Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.07.2022, 10:36
Кандидат Javascript-наук
Отправить личное сообщение для CryNet Посмотреть профиль Найти все сообщения от CryNet
 
Регистрация: 02.01.2019
Сообщений: 148

Как я могу проверить только одно поле из формы используя Yup?
Схема выглядит так:

const ValidationScheme = Yup.object().shape({
  email: Yup.string()
    .required('Required')
    .email('Invalid email address'),
  password: Yup.string()
    .required('Required'),
  code: Yup.number()
    .integer()
    .positive()
    .typeError('You must specify a number')
    .required('Required'),
});


При клике на кнопку мне нужно провалидировать только поле "email" из формы. Удалить остальные поля из схемы я не могу, они мне нужны в другой логике (сабмит формы). Как мне это сделать?

P.S это всё работает на Реакте
Ответить с цитированием
  #2 (permalink)  
Старый 26.07.2022, 15:31
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,573

Пробовали так?
const emailFieldValidationScheme = Yup.string()
    .required('Required')
    .email('Invalid email address');

const ValidationScheme = Yup.object().shape({
  email: emailFieldValidationScheme,
  password: Yup.string()
    .required('Required'),
  code: Yup.number()
    .integer()
    .positive()
    .typeError('You must specify a number')
    .required('Required'),
});

emailFieldValidationScheme.validateSync('test');
Ответить с цитированием
  #3 (permalink)  
Старый 26.07.2022, 15:35
Кандидат Javascript-наук
Отправить личное сообщение для CryNet Посмотреть профиль Найти все сообщения от CryNet
 
Регистрация: 02.01.2019
Сообщений: 148

Сообщение от Nexus Посмотреть сообщение
Пробовали так?
В консоли ошибка, но сам инпут не подсвечивается, мол, он неправильно заполненный:
https://i.ibb.co/T2w9VPX/Screenshot-20220726-143353.png
Ответить с цитированием
  #4 (permalink)  
Старый 26.07.2022, 15:38
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,573

CryNet, ну так перехватите эти ошибки и отобразите для пользователя.
Ответить с цитированием
  #5 (permalink)  
Старый 26.07.2022, 17:19
Кандидат Javascript-наук
Отправить личное сообщение для CryNet Посмотреть профиль Найти все сообщения от CryNet
 
Регистрация: 02.01.2019
Сообщений: 148

Сообщение от Nexus Посмотреть сообщение
CryNet, ну так перехватите эти ошибки и отобразите для пользователя.
Та у меня есть костыль для этого:
if (rEmail.test(email)) {
      clearErrors('email');
    } else {
      return setError('email', { message: 'Invalid email address' });
    }

Но я бы хотел, чтобы это полностью обработал Yup. Но ваш костыль получше моего.
Ответить с цитированием
  #6 (permalink)  
Старый 26.07.2022, 17:48
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,573

Сообщение от CryNet
Но я бы хотел, чтобы это полностью обработал Yup.
Yup только проверяет соответствуют ли передаваемые данные созданной вами схеме, всем остальным, в том числе отображением уведомлений об ошибках, занимается "кто-то другой" (скорее всего, какая-то библиотека для построения форм).
Ответить с цитированием
  #7 (permalink)  
Старый 26.07.2022, 18:02
Кандидат Javascript-наук
Отправить личное сообщение для CryNet Посмотреть профиль Найти все сообщения от CryNet
 
Регистрация: 02.01.2019
Сообщений: 148

Сообщение от Nexus Посмотреть сообщение
Yup только проверяет соответствуют ли передаваемые данные созданной вами схеме, всем остальным, в том числе отображением уведомлений об ошибках, занимается "кто-то другой" (скорее всего, какая-то библиотека для построения форм).
Да, правильно. У меня react-hook-form для форм юзается.

const {
    handleSubmit,
    control,
    formState: { errors }, // !important
    setError,
    register,
    clearErrors,
    getValues,
  } = useForm<ILoginForm>({
    resolver: yupResolver(ValidationScheme),
    defaultValues: {
      email: '',
      password: '',
      code: '',
    },
  });

Провозившись с Yum-ом забыл расписать нормально. При клике на Сабмит ошибка из Yum-а попадает в react-hook-form: resolver: yupResolver(ValidationScheme). Видимо таки придётся совместить ваше решение с моим. Я почему-то надеялся, что можно как-то более лаконично решить это. В любом случае -- спасибо вам за идею.
Ответить с цитированием
  #8 (permalink)  
Старый 26.07.2022, 23:29
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,573

CryNet, зачем вам понадобилось проверять одно единственное поле на корректность введенных пользователем данных?

Мне кажется, что вы решаете несуществующую проблему, либо существующую, но не тем способом.
Ответить с цитированием
  #9 (permalink)  
Старый 27.07.2022, 10:17
Кандидат Javascript-наук
Отправить личное сообщение для CryNet Посмотреть профиль Найти все сообщения от CryNet
 
Регистрация: 02.01.2019
Сообщений: 148

Сообщение от Nexus Посмотреть сообщение
CryNet, зачем вам понадобилось проверять одно единственное поле на корректность введенных пользователем данных?

Мне кажется, что вы решаете несуществующую проблему, либо существующую, но не тем способом.
Сейчас распишу весь флоу. У меня есть форма:
- email
- password
- 2FA
И две кнопки:
- Get 2FA
- Submit
Флоу такой:
- юзер заполнил поля email и password и кликает на кнопку Get 2FA (вот тут мне нужно проверить это единственное поле)
- юзер вводит 2FA и кликает на Сабмит (тут проверяется всё остальное)
Ответить с цитированием
  #10 (permalink)  
Старый 27.07.2022, 19:02
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,573

CryNet, я бы сделал как-то так только через class component:

https://codesandbox.io/s/form-exampl...c/LoginForm.js

import React, { useState } from "react";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as Yup from "yup";

export default function LoginForm() {
  const [tokenWasRequested, saveTokenWasRequested] = useState(false);

  const validationScheme = Yup.object().shape({
    email: Yup.string().required("Required").email("Invalid email address"),
    ...(tokenWasRequested
      ? {
          password: Yup.string().required("Required"),
          code: Yup.number()
            .integer()
            .positive()
            .typeError("You must specify a number")
            .required("Required")
        }
      : {})
  });

  const {
    register,
    handleSubmit,
    formState: { errors }
  } = useForm({
    mode: "all",
    criteriaMode: "all",
    resolver: yupResolver(validationScheme)
  });

  const onSubmit = (data) => {
    if (!tokenWasRequested) {
      saveTokenWasRequested(true);

      return;
    }

    console.log(data);
  };

  const fields = [
    {
      type: "email",
      name: "email",
      label: "Email",
      props: {
        readOnly: tokenWasRequested
      }
    }
  ];

  if (tokenWasRequested) {
    fields.push(
      {
        type: "password",
        name: "password",
        label: "Password"
      },
      {
        type: "text",
        name: "code",
        label: "2FA token"
      }
    );
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {fields.map((field) => {
        const errorMessage = errors?.[field.name]?.message;

        return (
          <div
            key={`form-field--${field.type}-${field.name}`}
            className="field-wrapper"
          >
            <input
              {...(field.props ?? {})}
              type={field.type}
              placeholder={field.label}
              className={errorMessage ? "invalid" : undefined}
              {...register(field.name)}
            />
            {errorMessage ? (
              <div className="error-message">{errorMessage}</div>
            ) : null}
          </div>
        );
      })}
      <div className="form-controls">
        <button type="submit">
          {tokenWasRequested ? "Login" : "Get 2FA token"}
        </button>

        {tokenWasRequested ? (
          <button
            type="button"
            onClick={() => {
              saveTokenWasRequested(false);
            }}
          >
            Request another 2FA token
          </button>
        ) : null}
      </div>
    </form>
  );
}
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как передать значение переменной в IFRAME в поле формы JS-ом из самой страницы? DeUre Общие вопросы Javascript 14 17.12.2013 15:37
Управление скроллом "а-ля тач" HonesT Элементы интерфейса 2 27.08.2013 14:25
Как сделать реакцию на изменение любого элемента формы. Mik Events/DOM/Window 3 28.07.2011 08:52
Как осуществить валидацию только выбранных полей формы? Tomas jQuery 2 18.02.2011 06:44
Как перейти от одной формы к другой не используя header? Белая_Кошка Серверные языки и технологии 4 01.04.2010 02:47