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动态字段验证

回答

相关问题