Проверка формы jQuery с 400 полями ввода

У нас есть маска с примерно 400 полями ввода, которые все загружены на клиенте. Маска состоит из нескольких вкладок и аккордеонов, чтобы пользователи могли видеть и редактировать все необходимые поля. В конце редактирования маска проверяется на клиенте.

Мы используем интерфейс jQuery для вкладок и аккордеонов, а также Подключаемый модуль проверки jQuery для проверки на клиенте. На сервере запускаем ASP.NET MVC. Чтобы сгенерировать HTML с необходимыми атрибутами data-val-*, мы используем разные методы:

• функция EditorFor-helper по умолчанию (@Html.EditorFor(model => model.property)
• специальные вспомогательные функции TextBoxFor, DropDownListFor ("@Html.EditorFor(model => model.property')

• пользовательские теги HTML, когда нам нужно особое форматирование, например:

  <input 
      class="text-box single-line" 
      data-val="true" 
      data-val-number="The field @data.Title must be a number." 
      id="@data.Name" 
      name="@data.Name" 
      type="text" 
      value="@data.Value" @(data.IsDisabled ? "disabled='disabled'" : string.Empty ) />
  

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

<input name="fieldName" 
       class="text-box single-line valid" 
       id="fieldName" 
       type="text" 
       value="311969d" 
       data-val="true" 
       data-val-length-max="8" 
       data-val-length="The field fieldName must be a string with a maximum length of 8.">

Если я изменю value этого ввода более чем на 8 символов, поле помечается красным, отображается и отображается ошибка, и все работает хорошо.

Однако, когда я нажимаю «Отправить», проверка занимает ~ 12,5 секунд — это то, что я получаю от IE — профайлера:

Как многие упоминали в комментариях до того, как я обновил этот вопрос, манипуляции с DOM делают выполнение чрезвычайно медленным, но я не понимаю, почему плагин jQuery-Validation добавляет новые элементы на мою HTML-страницу. Здесь вы можете увидеть showLabel-функцию, которая выполняет манипуляции с DOM:

showLabel: function(element, message) {
    var label = this.errorsFor( element );
    if ( label.length ) {
        // refresh error/success class
        label.removeClass( this.settings.validClass ).addClass( this.settings.errorClass );

        // check if we have a generated label, replace the message then
        label.attr("generated") && label.html(message);
    } else {
        // create label
        label = $("<" + this.settings.errorElement + "/>")
            .attr({"for":  this.idOrName(element), generated: true})
            .addClass(this.settings.errorClass)
            .html(message || "");
        if ( this.settings.wrapper ) {
            // make sure the element is visible, even in IE
            // actually showing the wrapped element is handled elsewhere
            label = label.hide().show().wrap("<" + this.settings.wrapper + "/>").parent();
        }
        if ( !this.labelContainer.append(label).length )
            this.settings.errorPlacement
                ? this.settings.errorPlacement(label, $(element) )
                : label.insertAfter(element);
    }
    if ( !message && this.settings.success ) {
        label.text("");
        typeof this.settings.success == "string"
            ? label.addClass( this.settings.success )
            : this.settings.success( label );
    }
    this.toShow = this.toShow.add(label);
},

Интересно, однако, что теперь метка ошибки или что-то подобное отображается или отображается в DOM. Кроме того, мы не хотим отображать какие-либо метки, так как на маске для них нет места. Мы бы предпочли использовать тексты всплывающих подсказок, где отображается ошибка, поскольку они работают с большинством современных браузеров и проверкой HTML 5.

Для краткосрочного решения было бы хорошо, если бы мы могли каким-то образом отключить (только для этой маски) манипулирование DOM. Возможно ли это с какой-то конфигурацией?

Более сложным решением было бы использовать проверку HTML 5 вместо JavaScript, поскольку наш клиент уже использует IE 9 или 10 и при необходимости сможет обновить его до версии 10, которая его поддерживает. Я нашел SO-вопрос об этом в ноябре прошлого года: to-the-w3c-specs">Атрибуты формы ASP.NET MVC 5 и HTML 5 в соответствии со спецификациями W3C - Может быть, что-то изменилось или изменится таким образом? Так как ручная реализация для всех полей будет слишком большой работой.