JQuery Validator: проверка формы, которая не прикреплена к DOM

У меня возникают проблемы, когда я пытаюсь проверить форму с помощью Плагин jQuery Validator. Итак, в этом случае я построил таблицу div (не элементы таблицы, а элементы div, стилизованные под таблицу), где каждая строка, по сути, представляет собой свою собственную форму, заполненную с любыми элементами управления формой.

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


То, что я делаю, по сути клонирую строку и добавляю клон в новую форму, которую я создаю следующим образом

$("<form></form>").append(clonedRow);

Затем я беру полученную переменную (форму) и настраиваю проверку. Параметры / настройки проверки выглядят следующим образом:

form.validate({
    rules: {
        Follow_Up_Code: { required: true, maxlength: 2 }
    },
    messages: {
        Follow_Up_Code: { required: "...", maxlength: "..." }
    },
    submitHandler: function(){...}
});

В настоящее время я хочу проверить только один ввод в этой строке. Вот разметка ввода:

<input type = "text" class = "get set input" name = "Follow_Up_Code" style = "width: 100%;">

После того, как форма запускает .validate (), я немедленно отправляю форму. Однако для моего тестового примера форма проходит проверку и каждый раз запускает SubmitHandler, настроенный в валидаторе.

Это наводит меня на мысль, что любая форма, которую я хочу проверить с помощью этого плагина, должна быть прикреплена к DOM для правильной проверки. Однако я не нашел по этому поводу документации. Я хотел бы знать, есть ли способ исправить это, или мне лучше попытаться найти / создать свою собственную службу проверки для этой цели.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
38
1

Ответы 1

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

form.css({ position: "absolute", visibility: "hidden", left: "-5000px" });
$("body").append(frm);
frm.submit();

Таким образом, пользователь не сможет видеть или взаимодействовать с этой формой, пока она находится в DOM.


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

После того, как все сказано и сделано, было бы неплохо уничтожить валидатор и удалить эту форму из DOM. Я считаю, что делать это в конце обработчика отправки и обработчика недопустимых ошибок было бы лучшим способом сделать это.

Другие вопросы по теме