jquery動態字段驗證

我使用jQuery的驗證插件，並期待驗證許多動態添加的文本字段，使得它們的總和檢查單獨的總計字段。jquery動態字段驗證

我以前寫過自己的驗證方法，但只有簡單的那些採用基本正則表達式結構，可以很容易地從additional-methods.js文件中重現。

具體來說，jQuery的網站提供了使用addMethod() function做的相當類似的事情的一個簡單的例子：

jQuery.validator.addMethod("math", function(value, element, params) { 
return this.optional(element) || value == params[0] + params[1]; 
}, jQuery.format("Please enter the correct value for {0} + {1}"));

的PARAMS參數的實施記錄更多或更少不佳。我能夠找到如何將內容傳遞到參數a seperate stackoverflow thread。然而，在這個例子中傳入參數的數組是靜態的。我需要傳遞給params的數組根據在'運行時'添加的動態添加行增長和縮小...

我已經上傳了一個完全精簡的版本onto jsfiddle供您查看。 請注意，代碼在我有問題的地方嵌入了一些註釋，而且我刪除了刪除功能，因爲它只會增加混亂並且無助於說明這一點。

那麼如何使用jQuery驗證庫來確保動態添加的字段添加到特定的總數？先謝謝你！

來源

2011-06-17 Jordan Arseno

這是我的驗證器版本。

http://jsfiddle.net/linkabi9/shBxv/

你會發現，而不是爲參數靜態數字，我傳遞一個選擇。數組中的一個元素是存款字段的選擇器。我給每個現有的和新的存款輸入一個類「setamount1」，你可以使用任何你想要的類。您設置此驗證器的字段將爲「總金額」字段。

我還在存款字段中添加了一個實時「更改」事件。這將對每次更改運行驗證。我必須警告你，這將在整個表格上進行驗證，而不僅僅是存款&總字段。

現在，您可以在相同的表單/頁面中多次重複使用此驗證器類型！

我繼續下面的驗證碼。另外，驗證器初始化的一個例子。

jQuery.validator.addMethod("depositsSum", function(value, element, params) 
{  
    var amnts = 0; 
    $(params[0]).each(function() { 
     amnts += parseFloat($(this).val()); 
    }); 

    return this.optional(element) || amnts == parseFloat(value); 
}, jQuery.format("Individual deposits must add up to the total!")); 

$("#depositForm").validate({ 
    rules: { 
     fullAmount: { 
      depositsSum: [".amountset1"] 
     } 
    } 
});

來源

2011-06-25 03:59:59

這絕對是執行我正在尋找的驗證的最簡潔的方式。我很欣賞所有響應者提供的時間和精力。謝謝！ *支付50塊錢* – 2011-06-26 02:24:25

嘗試使用這樣在烏拉圭回合中輸入HTML代碼...

<input id="check" name="check" type="text" class="required math">

一旦ü動態創建的輸入標籤如上然後它會被驗證爲每回合加方法..試試吧..

來源

2011-06-17 04:28:17

好的，我實際上正在嘗試這個......但是，如何將存入金額數組傳遞給驗證函數呢？這是一個很大的障礙。謝謝。 – 2011-06-17 04:33:34

因此，首先您需要一種方法來計算所有動態字段的總數。一種方式是通過將所有這些字段標記爲一個類。比方說，我們稱他們爲「金額」。然後你可以用它計算它們的總和

var total = 0; 
$('#depositForm input.amount').each(function() { 
    total += Number($(this).val()); 
});

現在，你需要將這個總值傳遞給驗證方法。由於JavaScript有閉包你可以做以下

$("#depositForm").validate({ 
    rules: { 
     fullAmount: { 
      depositsSum: function() { 
      var total = 0; 
      $('input.amount').each(function() { 
       total += Number($(this).val()); 
      }); 
      return total; 
      } 
     } 
    } 
});

此功能將每次執行及其結果將是你的參數值的方式。所以驗證功能最終將

function(value, element, total) { 
    return this.optional(element) || value == total; 
}

對於問題的第二部分，運行動態域驗證，有兩種方法。要麼有驗證標記類，要麼使用rule("add",)和rule("remove",)方法來插入/刪除動態字段。下面是類方法的示例：讓所有驗證的字段（動態和總計）都具有類「checkSum」。然後：

$.validator.addClassRules("checkSum", { 
    depositsSum: function() { 
     var total = 0; 
     $('input.amount').each(function() { 
      total += Number($(this).val()); 
     }); 
     return total; 
    } 
}); 
$("#depositForm").validate();

這是JSFiddle of it all。

當然，你會注意到這並不像你想象的那樣工作。對於您的應用程序，您要查找的驗證類型是由字段更改觸發的完整表單驗證，而不是字段驗證。玩一下，看看我在說什麼

來源

2011-06-19 09:53:11 charisis

這包括添加和刪除行的實時更新價格。 [download]

<html> 

    <head> 

     <script src="http://www.google.com/jsapi" type="text/javascript"></script> 
     <script type="text/javascript">google.load("jquery", "1");</script> 
     <script type="text/javascript"> 

      $(document).ready(
       function() 
       { 
        $('.add-row').click(
         function() 
         { 
          addRow(); 
          return false; 
         } 
        ); 

        addRow(); 
       } 
      ); 


      function addRow() 
      { 
       var newRow = '<li class="deposit"><input class="price"> <a href="#" class="remove">Remove</a></li>'; 

       $('.deposits').append(newRow); 
       $('.deposit:last .price').select(); 

       setListeners(); 
      } 

      function removeRow(val) 
      { 
       $(val).parents('.deposit').remove(); 

       sumDeposits(); 
      } 

      function setListeners() 
      { 
       $('.price').each(
        function() 
        { 
         $(this).keyup(
          function() 
          { 
           sumDeposits(); 
          } 
         ); 
        } 
       ); 

       $('.remove').each(
        function() 
        { 
         $(this).click(
          function() 
          { 
           removeRow(this); 
          } 
         ); 
        } 
       ); 
      } 


      function sumDeposits() 
      { 
       var total = 0; 

       $('.price').each(
        function() 
        { 
         total += Number($(this).val()); 
        } 
       ); 

       $('.total').html(total); 
      } 

     </script> 

    </head> 

    <body> 

     <h3>Total is <span class="total">N/A</span></h3> 

     <p><a href="#" class="add-row">Add</a></p> 

     <ul class="deposits"></ul> 

    </body> 

</html>

來源

2011-06-24 03:14:34

jquery動態字段驗證

回答

相關問題