Question

我有一个带有一些动态添加输入的表单，

我在这里输入的total_amt = 100;

我应该如何提交表单，直到所有动态添加的输入的总和必须等于total_amt

这是我的代码。

$(function(){
            var i = 1;
            $('#add_more').click(function(event) {
                event.preventDefault();
                $('input.items').last().attr('name', 'item['+i+']');
                $('#cart_items').append($('#tmp_cart').html());

                $('input[name="item['+i+']"]').rules("add", {
                    required: true,
                    depositsSum : function(){
                        return $(this).val();
                    },
                      messages:'Sum of total items should be equal to 100',
                });

                    i++;
                });

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

         return amnts;
        });

            $("#myForm").validate({
                rules: {
                    'item[0]': {
                        required:true
                    }
                }
            });
        })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/additional-methods.min.js"></script>

  <form action="" method="POST" id="myForm">
            Total Items<input type="text" value="100" name="total_amt" id="total_amt">

            <div id="cart_items">
                Items<input type="text" name="item[0]" class="items"><br/>
            </div>
            <button id="add_more">Add More</button> 
        <input type="submit" name="submit" value="submit">
    </form>
    <div id="tmp_cart" style="display: none;">
        <label>
            Items<input type="text" name="item[]" class="items">
            </label><br/>
    </div>

Answer 1

Two flaws in your code...

Within your .rules() method:
```
 depositsSum : function(){
     return $(this).val();
 },
```
You're trying to set the parameter of you custom rule to the value of the field. This is complete nonsense. A parameter is something like Max: 10, where 10 is the parameter and it defines the rule; it's never the actual value of the field, which, by the way, always changes and is empty when the page loads. When you want to invoke the custom rule, set the parameter to true.

And related to the next problem...
Within your .addMethod() method:
```
$(params[0]).each(function() {
    amnts += parseFloat($(this).val());
});
```
The params argument would be useless in your case, since the parameter can not be used for passing the dynamic values of other fields. Use a jQuery selector to grab the other fields. Since the name begins with item, use the "starts with" selector.
```
$('[name^="item"]').each(function() {
    amnts += parseFloat($(this).val());
});
```

如何将动态值传递给jquery验证功能

1 个答案: