Javascript 未定义验证程序

我有一个类为

.subscribe

的按钮，但当我单击该按钮时，它会显示validator not defined，这就是我希望在单击按钮时运行的功能，请问为什么它仍然会带来该错误

var $form = $('#payment-form');
$form.find('.subscribe').on('click', payWithStripe);

/* If you're using Stripe for payments */
validator = $form.validate({
rules: {
    cardNumber: {
        required: true,
        cardNumber: true
    },
    cardExpiry: {
        required: true,
        cardExpiry: true
    },
    cardCVC: {
        required: true,
        cardCVC: true
    }
    },
   highlight: function(element) {
    $(element).closest('.form-control').removeClass('success').addClass('error');
},
unhighlight: function(element) {
    $(element).closest('.form-control').removeClass('error').addClass('success');
},
errorPlacement: function(error, element) {
    $(element).closest('.form-group').append(error);
}
});
function payWithStripe(e) {
e.preventDefault();

/* Abort if invalid form data */
if (!validator.form()) {
 //   alert("krkrk");
    return;
}

/* Visual feedback */
$form.find('.subscribe').html('Validating <i class="fa fa-spinner fa-pulse"></i>').prop('disabled', true);

var PublishableKey = 'pk_test_6pRNASCoBOKtIshFeQd4XMUh'; // Replace with your API publishable key
Stripe.setPublishableKey(PublishableKey);

/* Create token */
var expiry = $form.find('[name=cardExpiry]').payment('cardExpiryVal');
var ccData = {
    number: $form.find('[name=cardNumber]').val().replace(/\s/g,''),
    cvc: $form.find('[name=cardCVC]').val(),
    exp_month: expiry.month, 
    exp_year: expiry.year
 };

Stripe.card.createToken(ccData, function stripeResponseHandler(status, response) {
    if (response.error) {
        /* Visual feedback */
        $form.find('.subscribe').html('Try again').prop('disabled', false);
        /* Show Stripe errors on the form */
   $form.find('.payment-errors').text(response.error.message);
        $form.find('.payment-errors').closest('.row').show();
    } else {
        /* Visual feedback */
        $form.find('.subscribe').html('Processing <i class="fa fa-spinner fa-pulse"></i>');
        /* Hide Stripe errors on the form */
        $form.find('.payment-errors').closest('.row').hide();
        $form.find('.payment-errors').text("");
        // response contains id and card, which contains additional card   details            
        console.log(response.id);
        console.log(response.card);
        var token = response.id;
        // AJAX - you would send 'token' to your server here.
        $.post('/account/stripe_card_token', {
                token: token
            })
            // Assign handlers immediately after making the request,
            .done(function(data, textStatus, jqXHR) {
                $form.find('.subscribe').html('Payment successful <i class="fa fa-check"></i>');
            })
            .fail(function(jqXHR, textStatus, errorThrown) {
                $form.find('.subscribe').html('There was a  problem').removeClass('success').addClass('error');
                /* Show Stripe errors on the form */
                $form.find('.payment-errors').text('Try refreshing the page  and trying again.');
                $form.find('.payment-errors').closest('.row').show();
            });
    }
});
}
/* Fancy restrictive input formatting via jQuery.payment library*/
$('input[name=cardNumber]').payment('formatCardNumber');
$('input[name=cardCVC]').payment('formatCardCVC');
$('input[name=cardExpiry').payment('formatCardExpiry');

/* Form validation using Stripe client-side validation helpers */
jQuery.validator.addMethod("cardNumber", function(value, element) {
return this.optional(element) || Stripe.card.validateCardNumber(value);
}, "Please specify a valid credit card number.");

jQuery.validator.addMethod("cardExpiry", function(value, element) {    
/* Parsing month/year uses jQuery.payment library */
value = $.payment.cardExpiryVal(value);
return this.optional(element) || Stripe.card.validateExpiry(value.month, value.year);
}, "Invalid expiration date.");

jQuery.validator.addMethod("cardCVC", function(value, element) {
return this.optional(element) || Stripe.card.validateCVC(value);
}, "Invalid CVC.");



paymentFormReady = function() {
if ($form.find('[name=cardNumber]').hasClass("success") &&
    $form.find('[name=cardExpiry]').hasClass("success") &&
    $form.find('[name=cardCVC]').val().length > 1) {
    return true;
} else {
    return false;
}
}

$form.find('.subscribe').prop('disabled', true);
var readyInterval = setInterval(function() {
if (paymentFormReady()) {
    $form.find('.subscribe').prop('disabled', false);
    clearInterval(readyInterval);
}
}, 250);

var$form=$（“#付款单”）；
$form.find（'.subscribe'）。在（'click'，PayWithTripe'）；
/*如果您使用Stripe进行付款*/
验证程序=$form.validate({
规则：{
卡号：{
要求：正确，
卡号：对
},
信用卡有效期：{
要求：正确，
有效期：对
},
cardCVC：{
要求：正确，
cardCVC：是的
}
},
亮点：功能（元素）{
$（元素）。最近（'.form control'）。removeClass（'success'）。addClass（'error'）；
},
取消高亮显示：功能（元素）{
$（元素）。最近（'.form control'）。removeClass（'error'）。addClass（'success'）；
},
errorPlacement:函数（错误，元素）{
$（元素）。最近（'.form group'）。追加（错误）；
}
});
带Tripe（e）的函数{
e、 预防默认值（）；
/*如果表单数据无效，则中止*/
如果（！validator.form（））{
//警报（“krkrk”）；
返回；
}
/*视觉反馈*/
$form.find（'.subscribe'）.html（'Validating'）.prop（'disabled'，true）；
var PublishableKey='pk_test_6pRNASCoBOKtIshFeQd4XMUh'；//替换为API可发布密钥
Stripe.setPublishableKey（PublishableKey）；
/*创建令牌*/
var expiry=$form.find（'[name=cardeexpiry]'）。payment（'cardeexpiryval'）；
变量ccData={
编号：$form.find（'[name=cardNumber]'）.val（）.replace（/\s/g'，），
cvc:$form.find（'[name=cardCVC]'）.val（），
exp_月：expire.month，
exp_year:expire.year
};
Stripe.card.createToken（ccData，函数stripeResponseHandler（状态，响应）{
if（response.error）{
/*视觉反馈*/
$form.find（'.subscribe'）.html（'Try reach'）.prop（'disabled'，false）；
/*在窗体上显示条带错误*/
$form.find（'.payment errors'）.text（response.error.message）；
$form.find（'.payment errors'）.closest（'.row'）.show（）；
}否则{
/*视觉反馈*/
$form.find（'.subscribe'）.html（'Processing'）；
/*隐藏窗体上的条带错误*/
$form.find（'.payment errors'）.closest（'.row'）.hide（）；
$form.find（“.payment errors”）.text（“”）；
//响应包含id和卡，其中包含其他卡详细信息
console.log（response.id）；
控制台日志（响应卡）；
var token=response.id；
//AJAX—您可以在此处向服务器发送“令牌”。
$.post（“/account/stripe\u card\u token”{
令牌：令牌
})
//发出请求后立即分配处理程序，
.done（函数（数据、文本状态、jqXHR）{
$form.find（'.subscribe'）.html（'Payment successful'）；
})
.fail（函数（jqXHR、textStatus、errorshown）{
$form.find（'.subscribe'）.html（'有问题'）.removeClass（'success'）.addClass（'error'）；
/*在窗体上显示条带错误*/
$form.find（'.payment errors'）.text（'尝试刷新页面并重试'）；
$form.find（'.payment errors'）.closest（'.row'）.show（）；
});
}
});
}
/*通过jQuery.payment库设置限制性输入格式*/
$（'input[name=cardNumber]'）。付款（'formatCardNumber'）；
$（'input[name=cardCVC]'）。付款（'formatCardCVC'）；
$（'input[name=cardExpiry'）。付款（'formatCardExpiry'）；
/*使用条带客户端验证帮助程序进行表单验证*/
jQuery.validator.addMethod（“cardNumber”），函数（值，元素）{
返回此.optional（元素）| | Stripe.card.validateCardNumber（值）；
}，“请指定有效的信用卡号。”）；
addMethod（“cardExpiry”），函数（值，元素）{
/*分析月/年使用jQuery.payment库*/
值=$.payment.cardExpiryVal（值）；
返回此.optional（element）| Stripe.card.validateExpiry（value.month，value.year）；
}，“失效日期。”）；
jQuery.validator.addMethod（“cardCVC”，函数（值，元素）{
返回此.optional（element）| | Stripe.card.validateCVC（value）；
}，“无效CVC”）；
paymentFormReady=函数（）{
if（$form.find（'[name=cardNumber]'）.hasClass（“成功”）&&
$form.find（'[name=cardExpiry]'）.hasClass（“成功”）&&
$form.find（'[name=cardCVC]'）.val（）.length>1）{
返回true；
}否则{
返回false；
}
}
$form.find（'.subscribe'）.prop（'disabled'，true）；
var readyInterval=setInterval（函数（）{
如果（paymentFormReady（））{
$form.find（'.subscribe'）.prop（'disabled'，false）；
clearInterval（readyInterval）；
}
}, 250);

从问题中看不清楚，但可能是因为表单是在解析js后创建的。如果是这种情况，您需要像这样绑定事件：

$（“#付款表单”）。on（'click'、'subscribe'，payWithTripe）

这有帮助吗？P.S或者取决于

HTML

可能会提供类似

var selector=$form.find（'.subscribe'）

的选择器，然后

。on（'click'，selector，payWithTripe）；

验证器功能不工作，这是我的问题从我所看到的，你的问题是-

验证器功能已经定义，为什么它仍然会带来错误

。所以对我来说，该功能可能工作得很好，但单击后你会发现一个错误，即该功能没有定义。不过，我不会向你发送垃圾邮件，我给你写了一封po可能的解决方案，如果您想试试……当我使用

$（“#支付表单”）时。在（'click'、'subscribe'，payWithTripe）

上有一个错误，

$form.validate不是一个函数

@AdokiyeIruene，请定义var验证器