jQuery Xác thực khi thay đổi Tab

Question

Tôi đang làm việc với các plugin jQuery Validate và Tabs. Tôi muốn xác thực một tab cụ thể khi người dùng cố di chuyển ra khỏi tab đến một trong 2 tab khác. Có ai có kinh nghiệm với phương pháp đặc biệt này?

Hiện nay, đây là cách tôi ràng buộc các plugin 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'} 
     }); 
     //------------------ 
     //------------------ 
    }); 

Answer 1

Bạn có thể chạy một chức năng mỗi khi tab được thay đổi như sau:

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

Bạn có thể có một cái nhìn tại tài liệu chính thức here. Các sự kiện công cụ là xuống ở phía dưới.

Vì vậy, bạn có thể thực hiện xác thực bên trong chức năng đó cho một số điều khiển trong tab đó. Ngoài ra, thay vì chọn các tab khác nhau theo cách thủ công, bạn có thể nhận chỉ mục của tab bạn đang chọn bên trong hàm cũng bằng cách sử dụng ui.index. Ngoài ra, bạn có thể dễ dàng ngăn người dùng thay đổi sang tab khác nếu nội dung tab hiện tại không hợp lệ bằng cách sử dụng event.preventDefault(). Vì vậy, hoàn toàn, một cái gì đó như ...

$("#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'); 
      } 
     }   
}); 

Bạn có thể chơi với mã số here.