Question

使用JQuery / AJAX / JS提交form_for（）表单时，即使我编写了将prop切换为false的代码，提交按钮也无法重新启用。

我在控制台中成功激活了同一行JS代码，但是当Stripe验证正常失败时，它不起作用。

var StripepayOnestepSubscriptionForm = {
   initialize: function () {
    $(document).off('submit.stripepay-onestep-subscription-form').on(
        'submit.stripepay-onestep-subscription-form', '.stripepay-onestep-subscription-form',
        function () {
            return StripepayOnestepSubscriptionForm.handleSubmit($(this));
        }
    );
},

handleSubmit: function (form) {
    if (!StripepayOnestepSubscriptionForm.validateForm(form)) {
        return false;
    }

    $(form).find('div :submit')
        .prop('disabled', true).change();
    $('.stripepay-spinner').css('visibility', 'visible');

    Stripe.card.createToken(form, function (status, response) {
        StripepayOnestepSubscriptionForm.stripeResponseHandler(form, status, response);
    });
    return false;
},

validateForm: function (form) {
    var cardNumber = $("input[data-stripe='number']").val();
    if (!Stripe.card.validateCardNumber(cardNumber)) {
        StripepayOnestepSubscriptionForm.showError(form, 'The card number is not a valid credit card number.');
        return false;
    }
    if ($("[data-stripe='exp']").length) {
        var valid = !Stripe.card.validateExpiry($("[data-stripe='exp']").val());
    } else {
        var expMonth = $("[data-stripe='exp_month']").val();
        var expYear = $("[data-stripe='exp_year']").val();
        var valid = !Stripe.card.validateExpiry(expMonth, expYear);
    }
    if (valid) {
        StripepayOnestepSubscriptionForm.showError(form, "Your card's expiration month/year is invalid.");
        return false
    }

    var cvc = $("input[data-stripe='cvc']").val();
    if (!Stripe.card.validateCVC(cvc)) {
        StripepayOnestepSubscriptionForm.showError(form, "Your card's security code is invalid.");
        return false;
    }

    return true;
},

stripeResponseHandler: function (form, status, response) {
    if (response.error) {
        StripepayOnestepSubscriptionForm.showError(form, response.error.message);
    } else {
        var email = form.find("[data-stripepay='email']").val();
        var coupon = form.find("[data-stripepay='coupon']").val();
        var quantity = form.find("[data-stripepay='quantity']").val();

        var base_path = form.data('stripepay-base-path');
        var plan_type = form.data('stripepay-plan-type');
        var plan_id = form.data('stripepay-plan-id');

        var action = $(form).attr('action');

        form.append($('<input type="hidden" name="plan_type">').val(plan_type));
        form.append($('<input type="hidden" name="plan_id">').val(plan_id));
        form.append($('<input type="hidden" name="stripeToken">').val(response.id));
        form.append($('<input type="hidden" name="stripeEmail">').val(email));
        form.append($('<input type="hidden" name="coupon">').val(coupon));
        form.append($('<input type="hidden" name="quantity">').val(quantity));
        form.append(StripepayOnestepSubscriptionForm.authenticityTokenInput());
        $.ajax({
            type: "POST",
            url: action,
            data: form.serialize(),
            success: function (data) {
                StripepayOnestepSubscriptionForm.poll(form, 60, data.guid, base_path);
            },
            error: function (data) {
                StripepayOnestepSubscriptionForm.showError(form, jQuery.parseJSON(data.responseText).error);
            }
        });

    }
},

poll: function (form, num_retries_left, guid, base_path) {
    if (num_retries_left === 0) {
        StripepayOnestepSubscriptionForm.showError(form, "This seems to be taking too long. Please contact support and give them transaction ID: " + guid);
    }
    var handler = function (data) {
        if (data.status === "active") {
            window.location = base_path + '/confirm_subscription/' + guid;
        } else {
            setTimeout(function () {
                StripepayOnestepSubscriptionForm.poll(form, num_retries_left - 1, guid, base_path);
            }, 500);
        }
    };
    var errorHandler = function (jqXHR) {
        StripepayOnestepSubscriptionForm.showError(form, jQuery.parseJSON(jqXHR.responseText).error);
    };

    if (typeof guid != 'undefined') {
        $.ajax({
            type: 'GET',
            dataType: 'json',
            url: base_path + '/subscription_status/' + guid,
            success: handler,
            error: errorHandler
        });
    }
},

showError: function (form, message) {
    $('.stripepay-spinner').css('visibility', 'hidden');
    $(form).find('div :submit')
        .prop('disabled', false).change()
        .trigger('error', message);

    var error_selector = form.data('stripepay-error-selector');
    if (error_selector) {
        $(error_selector).text(message);
        $(error_selector).show();
    } else {
        form.find('.stripepay-payment-error').text(message);
        form.find('.stripepay-payment-error').show();
    }
},

authenticityTokenInput: function () {
    return $('<input type="hidden" name="authenticity_token"></input>').val($('meta[name="csrf-token"]').attr("content"));
  }
};

StripepayOnestepSubscriptionForm.initialize();

显示错误验证消息后，提交按钮保持禁用状态。

Answer 1

<%= f.submit “Sign up”, :class => ‘btn’, data: {disable_with: false} %>

允许JS控制按钮何时更改状态。（第5条）默认情况下会激活disable_with。这是导致错误的原因。

条带验证失败时，“提交”按钮不会重新启用

1 个答案: