e.preventDefault()；使用条带的jquery.payment在有效时停止提交表单

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();
    }
});