Question

我正在使用Stripe的jQuery插件验证信用卡输入字段，然后再发送详细信息以进行服务器端验证，但使用Stripe的示例，即使信用卡数据有效，我的表单也不会提交。

服务器端验证可以解决任何问题，但是如果用户在进入服务器之前数据出错，我想给用户提供反馈意见。

Stripe的jQuery插件：https://stripe.com/blog/jquery-payment。他们的例子是：http://stripe.github.io/jquery.payment/example/

我正在使用Bootstrap 3.3.4和jQuery 1.11.2

我的表格：

  <form novalidate autocomplete="on" name="securepay" id="securepay" method="post" action="?func=validate" data-toggle="validator">
    <div class="form-group col-sm-6">
        <label for="cc-number" class="control-label">Card Number:</label>
        <input id="cc-number" name="cc-number" type="tel" class="form-control cc-number paymentInput" autocomplete="cc-number" placeholder="•••• •••• •••• ••••" data-error="Please enter the long card number" value="" required>
        <div class="help-block with-errors"></div>
      </div>
      <div class="form-group col-sm-6">
        <label for="cc-exp" class="control-label">Expiry Date:</label>
        <input id="cc-exp" name="cc-exp" type="tel" class="form-control cc-exp paymentInput" autocomplete="cc-exp" placeholder="MM / YY" data-error="Please enter the expiry date shown on the card" value="" required>
        <div class="help-block with-errors"></div>
      </div>
      </div>
      <div class="row">
      <div class="form-group col-sm-6">
        <label for="cc-cvc" class="control-label">CVC Number:</label>
        <input id="cc-cvc" name="cc-cvc" type="tel" class="form-control cc-cvc paymentInput" autocomplete="off" placeholder="•••" data-toggle="popover" data-trigger="focus" data-placement="right" title="CVC Security Number" data-content="On most cards, the 3-digit security code is on the back, to the right of the signature. On American Express cards, the 4-digit security code is on the front, to the top-right of the card number." data-error="Please enter the CVC number" required>
        <div class="help-block with-errors"></div>
      </div>
      <div class="form-group col-sm-6">
        <label for="cc-name" class="control-label">Name on Card:</label>
        <input id="cc-name" name="cc-name" type="text" class="form-control cc-name paymentInput" autocomplete="cc-name" data-error="Please enter your name as specified on the card" value="" required>
        <div class="help-block with-errors"></div>
      </div>
      </div>
     <div class="checkbox">
    <label>
      <input type="checkbox" id="cc-terms" required><span class="text-info small">Please confirm that you agree to our Terms and Conditions</span>
    </label>
    </div>
  </div>
    <div class="form-group col-sm-12">
        <button type="submit" id="secure-submit" class="btn btn-primary margin-10">Make Payment</button>
    </div>
</form>

我的Javascript：

$(function () {
    $('[data-toggle="popover"]').popover({container: 'body'})

    //Form Validation
    $('#securepay').validator()

    //$('[data-text]').payment('restrictText');
    $('.cc-number').payment('formatCardNumber');
    $('.cc-exp').payment('formatCardExpiry');
    $('.cc-cvc').payment('formatCardCVC');

    $.fn.toggleInputError = function(erred) {
        this.parent('.form-group').toggleClass('has-error', erred);
        this.parent('button').toggleClass('disabled', 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').val(cardType);

    });
});

问题是它使用e.preventDefault();会导致表单无法提交，即使验证通过也是如此。

如果出现错误，我想使用preventDefault();来停止提交表单，但是最好的方式是什么才能使表单在验证通过时提交？我尝试了一些不同的选项，但我似乎无法按照我想要的方式工作。

Answer 1

在您的功能结束时，您可以添加

$(this).unbind('submit').submit()

如果验证通过。

Answer 2

也许我有点晚了，但也许对某人有用......

$('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').val(cardType);

    //check if there are errors
    if(!$('.has-error').length) {
      // The answare of @loli
      $(this).unbind('submit').submit();
    }
});

e.preventDefault（）;使用Stripe的jquery.payment在有效时停止提交表单

2 个答案: