すべてのフォームのjQueryバリデーターでクレジットカードを受け入れるためにStripe支払いシステムを使用していajax
ます。
これはストライプと ajax で機能しますが、検証は機能しません。
ここはprocess.php
https://gist.github.com/1750375 です
$(document).ready(function() {
var payBtn = $('#paymentBtn').click(function(){
Stripe.createToken({
number: $('.card_number').val(),
cvc: $('.card_cvc').val(),
exp_month: $('.card_expiry_month').val(),
exp_year: $('.card_expiry_year').val()
},
function(status, response) {
if (response.error) {
payBtn.removeAttr("disabled");
$(".payment_errors").html(response.error.message);
addInputNames();
} else {
var token = response['id'];
//$("#stripeToken").val(token);
var amount = $("#formAmount").val();
$.post( 'process.php', {amount:amount, stripeToken:token},function(data){
$('#recDiv').html(data);
});
}
});
return false;
});
// THIS SECTION BELOW DOES NOT GET CALLED
jQuery.validator.addMethod("cardNumber", Stripe.validateCardNumber, "*");
jQuery.validator.addMethod("cardCVC", Stripe.validateCVC, "*");
jQuery.validator.addMethod("cardExpiry", function() {
return Stripe.validateExpiry($(".card_expiry_month").val(),
$(".card_expiry_year").val())
}, "*");
$("#payment_form").validate({
submitHandler: submit,// this does nothing
rules: {
"card_cvc" : {
cardCVC: true,
required: true
},
"card_number" : {
cardNumber: true,
required: true
},
"card_expiry_year" : "cardExpiry"
}
});
});
これは検証には機能しますが、ストライプは機能しません。.post
これは、最初の例から以前の変数がすべて欠落している関数を this に配置したためsubmitHandler
です。
$("#payment_form").validate({
submitHandler: function(form) {
$.ajax({
type: 'POST',
url: 'process.php',
data: $(this).serialize(),
success: function(returnedData) {
$('#recDiv').append(returnedData);//nothing happens because stripe doesnt work
}
});
return false;
},
rules: {
"card_cvc" : {
cardCVC: true,
required: true
},
"card_number" : {
cardNumber: true,
required: true
},
"card_expiry_year" : "cardExpiry"
}
});
質問: 上記の最初のサンプルから検証を機能させるにはどうすればよいですか?