LiveValidation + UI選項卡 - 多驗證

Question

我使用livevalidation.com的LiveValidation進行一些簡單的，更復雜的表單驗證上我的大部分項目的一頁。

主要是爲了提升用戶expirence。

我做了什麼。 - 替換從文本無效消息圖像 - 當表格submited - 並且是無效的 - 專注於第一無效輸入字段 - 當表格submited - 並且是無效的 - 加紅色邊框全部無效領域

我想要做的事： - 創造出被驗證表單功能 - 但僅在當前選項卡中

我們如何能做到這一點「manualy」 - 我們可以創建另一個變種automaticOnSubmit2 = field4.form。的onsubmit;

如果字段4始終是當前選項卡上的第一個輸入。 因爲我的選項卡會生成未知數量的選項卡 - 我正在尋找更通用的解決方案。

我做了一些嘗試 - 但我的js的知識/ jQuery是非常貧窮的 - 所以我失敗了。

//嘗試1

$(".ui-tabs-panel:not(.ui-tabs-hide) > form") 

• 這是正確的 - 螢火可以發現，只有1 - 開/當前選項卡 - 在那裏，我們要驗證表單位於

  $(".ui-tabs-selected").ready(function() { 
  var automaticOnSubmit = $(".ui-tabs-panel:not(.ui-tabs-hide) > form").submit; 
  $(".ui-tabs-panel:not(.ui-tabs-hide) > form").submit = function(){ 
      var valid = automaticOnSubmit(); 
      if(valid)alert('Form is Valid!'); 
      else{ 
       $(".LV_invalid_field:first", document.forms).focus(); 
       } 
      return false 
  } 
  

  } ）;

最好的問候，

彼得

Answer 1

Online demo 1
Online demo 2

Zip with both

Livevalidation + jQuery UI的標籤 解決方案：

$("form").each(function (i) { 
    var automaticOnSubmit = this.onsubmit; 
    this.onsubmit = function(){ 
     var valid = automaticOnSubmit(); 
     if(valid)alert('Form is Valid!'); 
     else{ 
      $(".LV_invalid_field:first", document.getElementById(this.id)).focus(); 
     } 
     return false 
    } 
});