Я создаю пользовательский элемент Forms, который должен:
- вызывать внешний API
- проверять введенное пользователем значение (например, проверять, соответствует ли значение уже существует в БД)
- Запретить отправку формы, если API возвращает недействительный результат
Важно: я хочу, чтобы проверка выполнялась одновременно:
- На интерфейсе (перед отправкой)
- На серверной части (в целях безопасности)
Текущая структура
- Бэкенд: .NET Framework (CMS 11)
- Фронтенд: React
- Оптимально отображает HTML-форму на стороне сервера
- Я внедряю визуализированную HTML-форму в компонент React ()
Код: Выделить всё
dangerouslySetInnerHTML - Я полагаюсь на встроенное поведение отправки Optimizely Forms.
- Оптимизирует рендеринг формы
- React монтирует и внедряет HTML-форму
- Пользователь отправляет данные
- Мой пользовательский валидатор элементов работает
- Валидатор вызывает API асинхронно
- На основе результата API → разрешать или блокировать отправку
Чтобы убедиться, что мой пользовательский валидатор подключен правильно, я сначала скопировал встроенный обязательный валидатор и изменил его.
(См. скриншоты ниже)


Однако во внешнем интерфейсе я столкнулся с проблемой (см. снимок экрана). Похоже, что пользовательский метод проверки, созданный во внутренней части, неправильно генерируется или распознается во внешнем интерфейсе.

Из-за этого я начал задаваться вопросом:
- Не регистрируется ли мой валидатор правильно?
- Рендеринг формы внутри React нарушает конвейер проверки Optimizely?
- Или асинхронная проверка просто не поддерживается таким образом?
Подробнее здесь: https://stackoverflow.com/questions/798 ... preventing
Мобильная версия