我正在实现一种 Braintree(支付网关)形式,它要求信用卡字段具有以下属性:数据加密名称
这是我的表格:
<form id="braintree-payment-form">
<input type="text" name="first_name" id="first_name" />
<br/><br/>
<input type="text" name="last_name" id="last_name" />
<br/> <br/>
<input type="text" id="number" data-encrypted-name="number" />
<br/><br/>
<input type="text" id="cvv" data-encrypted-name="cvv" />
<br/><br/>
<input type="submit" />
</form>
问题是在尝试使用 jQuery Validate 验证这些字段时,验证无法正常工作。
这是我的代码(包括用于显示错误消息的 qtip 库):
$(document).ready(function() {
$("#braintree-payment-form").validate({
errorClass: "errormessage",
errorClass: 'error',
validClass: 'valid',
rules: {
"first_name": { required: true, maxlength: 45 },
"last_name": { required: true, maxlength: 45 }
},
messages: {
"first_name": { required: "Enter your Name", maxlength: "Largo máximo de 45 caracteres" },
"last_name": { required: "Enter your Last Name", maxlength: "Largo máximo de 45 caracteres" }
},
errorPlacement: function(error, element)
{
//qtip
var elem = $(element),
corners = ['right center', 'left center'],
flipIt = elem.parents('span.right').length > 0;
if(!error.is(':empty')) {
elem.filter(':not(.valid)').qtip({
overwrite: false,
content: error,
position: {
my: corners[ flipIt ? 0 : 1 ],
at: corners[ flipIt ? 1 : 0 ],
viewport: $(window)
},
show: {
event: false,
ready: true
},
hide: false,
style: {
classes: 'ui-tooltip-blue'
}
})
.qtip('option', 'content.text', error);
}
else { elem.qtip('destroy'); }
},
success: $.noop,
debug: false
});
$( "#number" ).rules( "add", {
required: true,
creditcard: true,
messages: {
required: "Credit Card Number is required",
creditcard: "Invalid Credit Card Number"
}
});
$( "#cvv" ).rules( "add", {
required: true,
messages: {
required: "CVV Invalid"
}
});
});
名字和姓氏验证正确,但如果输入卡号,则验证第一个数字,然后 CVV 字段重复相同的消息验证卡。
看这个链接:jsFiddle
我的代码基于此答案中的示例:jQuery validate plugin added multiple .rules() function
提前致谢!
问候。