就像我在标题中所说的,我想在我的脚本中添加多个函数.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|35d{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>
只是猜测,因为我无法从您发布的有限代码中重现您的问题,但我想说您忘记在每个输入元素上包含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中的目标是#cardNum
,但我在你发布的HTML中没有看到id="cardNum"
。
我已经能够成功地将jQuery验证器插件与braintree.js一起使用。我要做的第一件事是将brainstree.js下载到我的本地版本,而不是托管版本。然后我编辑了文件,其中:
element.removeAttribute("name");
已找到。我只是这样评论:
/*element.removeAttribute("name");*/
它在文件的最后一行。
我还将braintree的初始化放在验证脚本之前
var braintree = Braintree.create("<%=SESSION("ENCRYPTIONKEY")%>");
braintree.onSubmitEncryptForm('donation-form', null);
正如你所看到的,我正在为加密密钥集成一些服务器端代码,并且我不会调用任何函数,在它完成它与表单的关系之后。
我使用了一个常规的提交按钮,它同时触发验证器和brainstree.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获得响应,并使用"result"键创建自己的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;博士你必须阻止braintree删除名称属性,然后在提交之前自己删除。
嗨,我用这种方式解决
$('#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内部。。这使得移除的脑树成为输入名称。如果再次失败,我将再次添加输入名称。
别忘了删除brainstree.onSubmitEncryptForm('brainstree-payment-form',optionalCallback);
对不起我的英语。。
有一种方法可以扩展验证器对象以添加多个规则。请参阅此处的文档。
var newRules = {name: {required: true}, email: {required: true} }; //your object of new rules
$.validator.addClassRules(newRules);