【问题标题】:How can I submit my stripe.js-powered form?如何提交我的 stripe.js-powered 表单?
【发布时间】:2015-11-24 19:17:30
【问题描述】:

我正在尝试使用验证器创建一个由 Stripe.js 提供支持的表单。这是我的源代码:

<script type="text/javascript">
jQuery(function($) {
  $('[data-numeric]').payment('restrictNumeric');
  $('.cc-number').payment('formatCardNumber');
  $('.cc-exp').payment('formatCardExpiry');
  $('.cc-cvc').payment('formatCardCVC');

  $.fn.toggleInputError = function(erred) {
    this.parent('.form-group').toggleClass('has-error', erred);
    return this;
  };

  $('form').submit(function(e) {
    e.preventDefault();

    var cardType = $.payment.cardType($('.cc-number').val());
    $('.cc-number').toggleInputError(!$.payment.validateCardNumber($('.cc-number').val()));
    $('.cc-exp').toggleInputError(!$.payment.validateCardExpiry($('.cc-exp').payment('cardExpiryVal')));
    $('.cc-cvc').toggleInputError(!$.payment.validateCardCVC($('.cc-cvc').val(), cardType));
    $('.cc-brand').text(cardType);

    $('.validation').removeClass('text-danger text-success');
    $('.validation').addClass($('.has-error').length ? 'text-danger' : 'text-success');
  });

});
</script>

这里是完整来源的链接:http://pastebin.com/DZhNNGe7 Validator 可以很好地处理无效数据,但是在使用经过验证的数据填写表单后,表单实际上并未提交以获取令牌,但我收到一条绿色消息,提示“验证通过”。我需要做哪些更改才能让表单在验证后实际提交?

【问题讨论】:

    标签: javascript jquery ajax jquery-plugins


    【解决方案1】:

    改变

    $('form').submit(function(e) {
    

    到

    $('button[type="submit"]').click(function(e){
    

    并在正确验证后添加:

    $('form').submit();
    

    【讨论】:

    • 请说明我应该在哪里添加 $('form').submit(); ?在哪一行?
    • 更改 $('.validation').addClass($('.has-error').length ? 'text-danger' : 'text-success');到 if ($('.has-error').length) { $('.validation').addClass('text-danger') } else { $('.validation').addClass('text-success' ); $('form').submit() }
    • 因此,在上面的评论和您关于按钮的答案的第一部分中都有更改,表单将仅在验证后提交,我会得到令牌?
    • 我发现了我的错误,您的更新是正确的,问题是表单字段中缺少条带数据标签。似乎条带需要两个 data-stripe="exp-month" 和 data-stripe="exp-year" 但在这种形式中,它要求在一个用 / 分隔的字段中进行验证,所以我需要在我的条带脚本中添加一个部分,以通过 / 拆分 &lt;input id="cc-exp" type="tel" class="input-lg form-control cc-exp" autocomplete="cc-exp" placeholder="•• / ••" required class="col-md-2"&gt; 的数据并分配data-stripe="exp-month" 和 data-stripe="exp-year" 的值。请建议我如何在该脚本中执行此操作?
    • 对于我的第二个问题,我创建了一个单独的帖子:stackoverflow.com/questions/33918956/…
    猜你喜欢
    • 2014-07-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-12-11
    • 2016-03-21
    • 2021-06-23
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多