Форум программистов, компьютерный форум, киберфорум
React/ReactJS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
0 / 0 / 1
Регистрация: 02.05.2020
Сообщений: 8

Нужно добавить валидацию формы ReactJS

25.10.2021, 21:02. Показов 493. Ответов 0

Студворк — интернет-сервис помощи студентам
Помогите пожалуйста доделать форму.
необходима проверка на введённые символы, например (if (e.target.value.length < 3 || e.target.value.length > 20))
В форме есть реагирующий button, что бы тоже срабатывал под это условие. И если можно также прикрутить стили для input под эти же условия.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
interface ILoginForm {
  Login: (inputValue: { name: string; password: string }) => void;
  error: string;
}
 
const MoleculesLoginForm: React.FC<ILoginForm> = ({ Login, error }) => {
  const [inputValue, setInputValue] = useState({ name: "", password: "" });
  const [formValid, setFormValid] = useState(true);
 
  const validate = ({ name, password }) => {
 
    // проверка валидности
    const nameIsValid = name;
    const passIsValid = password;
 
    const isCredentialsValid = nameIsValid && passIsValid;
    if (isCredentialsValid !== formValid) setFormValid(isCredentialsValid);
  };
 
  const submitHandler = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
 
    Login(inputValue);
  };
 
  const changeHandler = ({ currentTarget }: FormEvent<HTMLInputElement>) => {
    const { value, name } = currentTarget;
    setInputValue((prev) => {
      const formValues = { ...prev, [name]: value };
      validate(formValues);
      return formValues;
    });
  };
 
  return (
    <div className="block__login">
      <form onSubmit={submitHandler}>
        <div>
          {error !== "" ? <div>{error}</div> : ""}
          <div>
            <p>User name</p>
            <input
              className="block__login block__login__name"
              type="text"
              name="name"
              id="name"
              placeholder="Input user name"
              onChange={changeHandler}
              value={inputValue.name}
            />
          </div>
          <div>
            <p>Password</p>
            <input
              className="block__login block__login__pass"
              type="password"
              name="password"
              id="password"
              placeholder="Input password"
              onChange={changeHandler}
              value={inputValue.password}
            />
          </div>
          <button
            className="block__login block__login__btn"
            disabled={!formValid}
            type="submit"
          >
            Log In
          </button>
        </div>
      </form>
    </div>
  );
};
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
25.10.2021, 21:02
Ответы с готовыми решениями:

Нужно сделать валидацию для формы
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;FORMA&lt;/title&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot;...

Есть обработчик формы на лендинге, можно добавить простую валидацию на провеку заполненных полей ?
Здравствуйте, есть код обработчика без валидации, есть пустые заявки, можно вставить какой-то простой валидатор в код на проверку хотя бы...

Добавить кросс-валидацию в дерево решений
Господа, мне нужно сделать оценку точности классификации для дерева решений : accuracy, precision, recall, F-мера. Как вообще в дереве...

0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
25.10.2021, 21:02
Помогаю со студенческими работами здесь

Как добавить в валидацию что бы не ругалось на пробел?
// Проверка поля &quot;Имя&quot; case 'name': var rv_name = /^+$/; // используем регулярное выражение ...

Как добавить валидацию к сформированным классам EDMX модели?
Как добавить валидацию к сформированным классам EDMX модели? Если при изменении БД, придется пересоздать edmx, и всю валидацию придется с...

Отправка формы на Ajax игнорирует валидацию
Всем добрый день. Возникла такая проблема: Есть простенькая форма с которой при нажатии на кнопку &quot;отправить&quot; отправляются...

Как правильно сделать валидацию формы?
Доброго времени суток! Такая задача: при нажатии на кнопку &quot;Edit Post&quot; осуществляется переход на форму и происходит action getPost...

Добавить валидацию и отправлять форму, только когда поля заполнены
Допустим такой компонент и к нему тест. куда прописать следует заполнение поля title? import React from 'react'; export default...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
1
Ответ Создать тему
Новые блоги и статьи
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами
8Observer8 20.02.2026
Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .
Конвертировать закладки radiotray-ng в m3u-плейлист
damix 19.02.2026
Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .
Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI
Eddy_Em 18.02.2026
Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .
Камера Toupcam IUA500KMA
Eddy_Em 12.02.2026
Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу
zbw 12.02.2026
И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.
«Знание-Сила»
zbw 12.02.2026
«Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 12.02.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 11.02.2026
Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru