Выбор2 прокрутки сообщение об ошибке не работает с JQuery проверки и ASP.NET MVC

Question

проводки это здесь, в случае, если кто-то имеет та же проблема ...

При использовании select2 выпадающего меню в C# MVC4 сайта, страница не при завершении проверки прокручивается в правильное положение. Валидация как таковая работает и прокрутка ошибок также работает для других элементов управления, только не select2. Причиной AFAICS является то, что select2 заменяет оригинал select своей собственной разметкой, а затем устанавливает оригинал как display:none. jquery.validate не имеет действительной цели для прокрутки.

Мы используем twitter bootstrap для стилизации, но я не думаю, что это повлияет на эту проблему.

Answer 1

Документация jquery.validate (как и многие ответы здесь на StackOverflow) предполагает, что вы используете $ .validator.setDefaults для назначения invalidHandler, но я не мог заставить это работать в asp.net (он работает для focusInvalid однако), вероятно, из-за нас, используя MS ненавязчивую библиотеку. Вместо этого я использовал этот код в моем Jquery готовый обработчик:

$(function() { 
     $.validator.setDefaults({   
      focusInvalid: false 
     }); 

     function scrollToError(error, validator) { 
      var elem = $(validator.errorList[0].element); 
      if (elem.length) { 
       if (elem.is(':visible')) 
        return elem.offset().top - 16; 
       elem = elem.prev($(".select2-container")); 
       if (elem.length) { 
        return elem.offset().top - 16; 
       } 
      } 
      return 0; // scroll to top if all else fails 
     } 

     $('form').bind('invalid-form.validate', function(error, validator) { 
      // fix scrolling and validation for select2 

      if (!validator.numberOfInvalids()) 
       return; 

      $('html, body').animate({ 
       scrollTop: scrollToError(error, validator) 
      }, 500); 
     }); 
... 

Я установил focusInvalid ложь, чтобы отключить и избежать конфликта со стандартным свитка и фокус поведения.

Звонок bind() используется вместо параметра invalidHandler и является тем же самым, что используется плагином validate.

scrollToError() выбирает первый недопустимый элемент и возвращает позицию для прокрутки к обычному видимому элементу или предыдущему элементу с классом «select2-container» (например, элемент select2) или верхней частью страницы, если все остальное не выполняется.

Стандартное поведение (показывая ошибки проверки и т. Д.) По-прежнему работает по-прежнему.

Надеюсь, это поможет кому-то, и если у вас есть лучшее решение, мне было бы очень интересно узнать об этом.