Làm thế nào để xác nhận hợp lệ biểu mẫu Bootstrap của Twitter được đặt trên một số tab với jQuery Validate?

Question

Tôi có một hình thức nằm trên nhiều tab Bootstrap Twitter:

<form id="personal-data" class="form-horizontal"> 
    <div class="tabbable"> 
    <ul id="tab" class="nav nav-tabs"> 
     <li class="active"><a href="#home" data-toggle="tab">Home</a></li> 
     <li class=""><a href="#profile" data-toggle="tab">Profile</a></li> 
     <!-- ... --> 
    </ul> 

    <div id="myTabContent" class="tab-content"> 
     <div class="tab-pane fade active in" id="home"> 
     <fieldset> 
      <div class="control-group"> 
      <div class="controls"> 
       <input type="text" id="field1"> 
      </div> 
      </div> 
     </fieldset> 
     </div> 
     <div class="tab-pane fade" id="profile"> 
     <fieldset> 
      <div class="control-group"> 
      <div class="controls"> 
       <input type="text" id="field2"> 
      </div> 
      </div> 
     </fieldset>   
     </div> 

Khi tôi valid ăn mẫu với jQuery xác nhận trên tab hoạt động và lĩnh vực có giá trị không hợp lệ là trên cùng một tab, sau đó xác nhận thất bại (đó là chính xác). Nhưng khi tôi ở trên một tab và giá trị không hợp lệ là trên một tab khác, khi đó xác thực trả về true, điều này không chính xác. Làm thế nào tôi có thể sửa chữa nó? Làm cách nào để đánh dấu trường đó trên một tab khác?

Xin xem this demo (chỉ nút nhấn tiếp theo - nó sẽ hiển thị thông báo lỗi, sau đó đi đến tab cuối cùng và nhấn thúc có).

Answer 1

Các tab jQuery này bạn đang sử dụng phải không? Bạn có thể hủy kích hoạt tất cả các tab khác và dần dần kích hoạt chúng trong khi dữ liệu được gửi trên mỗi biểu mẫu vượt qua xác thực. Vô hiệu hóa tất cả chúng, nhưng đầu tiên trong constructor của bạn và sau khi xác nhận hợp lệ cho phép tiếp theo.

.tabs("enable" , index) 

Đọc thêm here.

Bạn cũng có thể đặt một phương thức xác thực cuối cùng vào cuối và đặt tất cả nội dung của bạn hiển thị tùy thuộc vào các tab để bạn có thể thoát khỏi tải lại các liên kết.

Answer 2

Tôi nghĩ rằng vấn đề của bạn nằm trong thực tế là xác thực chỉ xảy ra trong các phần tử hiển thị.

Reading issue này chúng ta thấy rằng trên phiên bản 1,9

Fixed #189 - :hidden elements are now ignored by default

và một giải pháp một vài ý kiến ​​xuống

$.validator.setDefaults({ 
    ignore: "" 
}); 

Answer 3

Giải pháp của tôi để cho phép các tab

... 
highlight: function(label) { 
     $(label).closest('.control-group').addClass('error'); 

     $(".tab-content").find("div.tab-pane:hidden:has(div.error)").each(function(){ 
      var id = $(this).attr("id"); 
      $('#tabs a[href="#'+id+'"]').tab('show'); 
     }); 
}, 
... 

là cần thiết mà bạn thêm mã này để cho phép tab thay đổi theo js

$('a[data-toggle="tab"]').on('shown', function (e) { 
    e.target // activated tab 
    e.relatedTarget // previous tab 
}); 

Answer 4

xây dựng trên @juanmanuele's answer, đây là cách tôi quản lý để làm cho nó làm việc với Bootstrap 3 tabs:

if($(".tab-content").find("div.tab-pane.active:has(div.has-error)").length == 0) 
{ 
    $(".tab-content").find("div.tab-pane:hidden:has(div.has-error)").each(function(index, tab) 
    { 
     var id = $(tab).attr("id"); 

     $('a[href="#' + id + '"]').tab('show'); 
    }); 
} 

Để đặt tập trung vào đầu vào 1 với lỗi:

$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) 
{ 
    e.target // activated tab 

    $($(e.target).attr('href')).find("div.has-error :input:first").focus(); 

    //e.relatedTarget // previous tab 
}); 

Answer 5

Không hẳn là giải pháp cho jQuery Validate, nhưng bạn có thể sử dụng sự kiện "không hợp lệ" trên các phần tử biểu mẫu, để bắt lỗi xác thực HTML5 và lấy phần tử tập trung, tìm tab tương ứng và hiển thị nó.

Tôi đã làm điều này.

$("form").find("input, select").on("invalid", function() { 
    var id = $(this).parents(".tab-pane").attr("id"); 

    $("#tabs-selector ul").find("li a[href='#" + id + "']").tab("show"); 
}); 

Hy vọng điều này sẽ giúp bạn. Một lần nữa, điều này là dành cho HTML5 hoặc nếu jQuery Validate kích hoạt một sự kiện không hợp lệ.

Answer 6

cảm ơn vì mã của bạn đã giải quyết được hầu hết vấn đề của tôi, ngoại trừ phần để điều hướng đến tab đầu tiên có lỗi.Tôi nhận được như sau:

 var IsValid = true; 

     // Validate Each Bootstrap tab 
     $(".tab-content").find("div.tab-pane").each(function (index, tab) { 
      var id = $(tab).attr("id"); 
      $('a[href="#' + id + '"]').tab('show'); 

      var IsTabValid = $("#SomeForm").valid(); 

      if (!IsTabValid) { 
       IsValid = false; 
      } 
     }); 

     // Show first tab with error 
     $(".tab-content").find("div.tab-pane").each(function (index, tab) { 
      var id = $(tab).attr("id"); 
      $('a[href="#' + id + '"]').tab('show'); 

      var IsTabValid = $("#SomeForm").valid(); 

      if (!IsTabValid) { 
       return false; // Break each loop 
      } 
     });