Проверка jQuery на вкладке изменения - PullRequest
Новая
       15

Проверка jQuery на вкладке изменения

7 голосов
/ 07 сентября 2011

Я работаю с плагинами jQuery Validate и Tabs. Я хочу проверить конкретную вкладку, когда пользователь пытается отойти от вкладки до одной из двух других вкладок. У кого-нибудь есть опыт работы с этим конкретным методом?

В настоящее время я подключаю плагин Tabs: 

   $(function() {
      //Bind Link Tab Selection
      //------------------
      var $tabs = $("#tabs").tabs();
       $('#step1_button').click(function() {
          $tabs.tabs('select','2');
          return false;
       });
       $('#step2_button').click(function() {
          $tabs.tabs('select','3');
          return false;
       });
       //------------------
       //------------------

       //Bind Tabs
       //------------------
       $("#tabs").tabs({
          fx: {width:'toggle'}
       });
       //------------------
       //------------------
    });

1 Ответ

10 голосов
/ 08 сентября 2011

Вы можете запускать функцию при каждом изменении вкладки следующим образом: 

$("#tabs").tabs({
        select: function(event, ui) {
            // Do your validation here
        }        
});

С официальной документацией можно ознакомиться здесь .Материал события находится внизу.

Таким образом, вы можете выполнить проверку внутри этой функции для некоторых элементов управления на этой вкладке.Кроме того, вместо выбора разных вкладок вручную, вы можете получить индекс вкладки, которую вы выбираете внутри функции, также используя ui.index.Кроме того, вы можете очень легко запретить пользователю переходить на другую вкладку, если текущее содержимое вкладок недопустимо с помощью event.preventDefault().В общем, что-то вроде ... 

$("#tabs").tabs({
        select: function(event, ui) {
            alert('validating tab ' + ui.index);

            var valid = false;

            // do your validating here...
            // determine validity

            // If the form isn't valid, prevent the tab from changing
            if(!valid)
            {
                // prevent further action
                event.preventDefault();
            }
            else
            {
                // valid so we'll allow user to change tab
                alert('valid');
            }
        }        
});

Вы можете поиграть с кодом здесь .

...