2

就像我在标题中所说的那样，我想在我的脚本中添加多个函数 .rules() 。当我尝试这个时：

$("#braintree-payment-form").validate({});



    $("#month").rules('add', {
        required: true,
        regex: "(0[123456789]|10|11|12)",
        messages : {
            required: "Expiration date is required.",
            regex: "Invalid expiration date."
        }
    });
    $("#year").rules('add', {
        required: true,
        regex: "([0-9][0-9])",
        messages : {
            required: "Expiration date is required.",
            regex: "Invalid expiration date."
        }
    });


    $("#cardNum").rules('add', {
        required: true,
        regex: "(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\d{3})\d{11})",
        messages : {
            required: "Credit card number is required.",
            regex: "Invalid credit card number"
        }
    });

仅应用了最后一个 .rules() ，并且它也应用于第一个输入元素而不是对应的 id 一个。

提前致谢 ：）

这是我目前使用的表格：

<form action="#" method="POST" id="braintree-payment-form">
    <p>
      <label>Card Number</label>
      <input type="text" size="20" autocomplete="off" name='number' id='number' data-encrypted-name="number"/>
    </p>
    <p>
      <label>CVV</label>
      <input type="text" size="4" autocomplete="off" name='cvv' data-encrypted-name="cvv" id='cvv'/>
    </p>
    <p>
      <label>Expiration (MM/YYYY)</label>
      <input type="text" size="2" data-encrypted-name="month" id="month" name = 'month' /> / <input type="text" size="4" data-encrypted-name="year" id="year" name='year' />
    </p>
    <input type="submit" id="submit" name='braintree'/>
  </form>
4

4 回答 4

2

只是一个猜测，因为我无法从您发布的有限代码中重现您的问题，但我想说您忘记name在每个输入元素上包含一个属性。jQuery Validate 插件要求name每个输入都是唯一的。

请参阅通用指南页面上的“标记建议”部分：

“name输入元素的属性是'必需的'，没有它验证插件就无法工作。通常name和id 属性应该具有相同的值。”

<form id="braintree-payment-form">  
     <input type="text" name="month" id="month" data-encrypted-name="month" />
     <input type="text" name="year" id="year" data-encrypted-name="year" />
     <input type="text" name="cardNum" id="cardNum" data-encrypted-name="cardNum" />
     <input type="submit" />
</form>

否则，您的代码工作正常：http: //jsfiddle.net/hc2Bj/2/

OP 发布 HTML 后编辑：

我还注意到您的目标是您的 jQuery，但在您发布的 HTML 中#cardNum我看不到任何地方。id="cardNum"

于 2013-07-03T23:00:30.347 回答
0

我已经成功地将 jQuery 验证器插件与 Braintree.js 一起使用。我要做的第一件事是将braintree.js 下载到我的本地而不是托管版本。然后我编辑了文件，其中：

element.removeAttribute("name");

位于。我只是这样评论了它：

/*element.removeAttribute("name");*/

它在文件的最后一行。

我还将braintree的初始化放在验证脚本之前

var braintree = Braintree.create("<%=SESSION("ENCRYPTIONKEY")%>");
braintree.onSubmitEncryptForm('donation-form', null);

如您所见，我正在为加密密钥集成一些服务器端代码，并且在它与表单相关之后我不调用任何函数。

我使用触发验证器和braintree.js 的常规提交按钮。Braintree 创建与字段同名的新隐藏输入。jQuery 验证器正常验证，因为它只查看输入名称的第一个实例。然后在 jQuery 验证器的 submitHandler 方法中，我删除了 name 属性，但创建了一个名为“xname”的新“name”属性。这是因为如果 Braintree 最终返回错误，我们必须允许用户重新提交表单。接下来我将介绍它是如何工作的。

submitHandler: function(form) {
// braintree has duplicated our fields as hidden encrypted.
// now change the name attribute from each field so it won't be submitted

$("input[data-encrypted-name]").each(function(){
$this = $(this);
var thisname = $this.attr("name");
$this.attr("xname",thisname);
$this.removeAttr("name");
}).promise().done(function(){ 
ajaxpost();             });

} // 结束提交处理程序

ajaxpost 调用是一个 $.ajax 函数，它发布到 PHP 文件。这是一个技巧部分，因为我从 Braintree 获得响应并使用“结果”键创建我自己的 JSON。如果结果也不是“成功”，它将是“错误”或“无效”。

在“错误”或“无效”的情况下，我会调用一个函数来恢复字段的原始名称。

    var reinstate = function(){
    // if the form has already been submitted, but braintree returns errors,
    // we have to reinstate the original field names.

    $("input[xname]").each(function(){
        $this = $(this);
        var thisxname = $this.attr("xname");
        $this.attr("name",thisxname);
        $this.removeAttr("xname");
    });
}

现在用户可以再试一次。希望这可以帮助。考虑到我实现的所有 ajax 和服务器端处理解决方案，我知道这个解释非常麻烦。

tl; dr您必须阻止braintree删除名称属性，然后在提交之前自己做。

于 2013-11-10T20:11:13.477 回答
0

大家好，我这样解决

$('#purchase_form').validate({
        rules: {
            name: {
                required: true
            },
            number: {
                required: true,
                minlength: 13,
                maxlength: 19
            },
            month: {
                required: true,
                regex: "(0[123456789]|10|11|12)"
            },
            year: {
                required: true,
                regex: "([0-9][0-9])"
            },
            cvv: {
                required: true,
                minlength: 3,
                maxlength: 4
            },
        },
        submitHandler: function (form) {
            $('#purchase_form').hide();
            $('#processing').show();

            braintree.encryptForm($(form));

            $.ajax({
                type: "POST",
                url: base_url+'items/purchase_direct',
                data: $(form).serialize(),
                dataType: "json",
                success: function (response) {
                    if(response.status == 'error')
                    {
                        $('#number_direct').attr('name','number');
                        $('#cvv_direct').attr('name','cvv');
                    }
                    else
                    {
                        $('#purchase_form').hide();
                        $('#processing').hide();
                        $('#purchaseconfirm').show();

                    }
                }
            });
            return false;
        }
    });

添加braintree.encryptForm($(form)); 在 submitHandler.. 内部，这使得 Braintree 删除了输入名称。如果再次失败，我将再次添加输入名称。

不要忘记删除braintree.onSubmitEncryptForm('braintree-payment-form', optionalCallback);

对不起我的英语不好..

于 2013-11-25T22:32:34.577 回答
0

有一种方法可以扩展验证器对象以添加多个规则。请参阅此处的文档。

var newRules = {name: {required: true}, email: {required: true} }; //your object of new rules

$.validator.addClassRules(newRules);
于 2015-09-23T13:40:36.180 回答