How do I correctly remove a class from the place order button upon error message?

See more:

Javascript

jQuery

It's a WooCommerce Stripe card payment.


I can correctly add the class on button click like this:

$('form.checkout').on('submit', function(event) {
      event.preventDefault();
      $('button#place_order').addClass('my_class');

But my code below is unable to remove it upon error message (after the button is clicked):

$('body').on('woocommerce_error', function(){
      console.log('woocommerce_error triggered');
      $('button#place_order').removeClass('my_class');
    });

The woocommerce_error class is added to the page HTML (this is on the cart) when an error occurs, but not to the button HTML.

using checkout_error doesn't work either - the class is not removed


There is no checkout_error class added to the button or to the page HTML when the error message occurs, but I can find it in the JS when I click on the error message in the console.
But it seems more like a notice than an error message in the console, it looks like this:




I am not sure wether this is a post validation or pre-validation use case.

Because checkout_error can occur only after the validation, is that right?

This is the JS code I get in the console when I click on the error notice:

if (t = s ? (a("body").removeClass("woocommerce-stripe-prb-clicked"),
        a("div.woocommerce-notices-wrapper").first()) : i.length ?
      (t = i.filter(":checked")).closest(".woocommerce-SavedPaymentMethods-new").length ?
      a("#wc-stripe-cc-form .stripe-source-errors") : t.closest("li").find(".stripe-source-errors") : n.find(".stripe-source-errors"),
      m.isSepaChosen() && "invalid_owner_name" === r.error.code && wc_stripe_params.hasOwnProperty(r.error.code)) {
      n = a('<div><ul class="woocommerce-error"><li /></ul></div>');
      return n.find("li").text(wc_stripe_params[r.error.code]),
        void m.submitError(n.html())
    }
    "email_invalid" === r.error.code ? o = wc_stripe_params.email_invalid : "invalid_request_error" !== r.error.type && "api_connection_error" !== r.error.type && "api_error" !== r.error.type && "authentication_error" !== r.error.type && "rate_limit_error" !== r.error.type || (o = wc_stripe_params.invalid_request_error),
      "card_error" === r.error.type && wc_stripe_params.hasOwnProperty(r.error.code) && (o = wc_stripe_params[r.error.code]),
      "validation_error" === r.error.type && wc_stripe_params.hasOwnProperty(r.error.code) && (o = wc_stripe_params[r.error.code]),
      m.reset(),
      a(".woocommerce-NoticeGroup-checkout").remove(),
      console.log(r.error.message),
      a(t).html('<ul class="woocommerce_error woocommerce-error wc-stripe-error"><li /></ul>'),
      a(t).find("li").text(o),
      a(".wc-stripe-error").length && a("html, body").animate({
        scrollTop: a(".wc-stripe-error").offset().top - 200
      }, 200),
      m.unblock(),
      a.unblockUI()
    },
    submitError: function(e) {
        a(".woocommerce-NoticeGroup-checkout, .woocommerce-error, .woocommerce-message").remove(),
          m.form.prepend('<div class="woocommerce-NoticeGroup woocommerce-NoticeGroup-checkout">' + e + "</div>"),
          m.form.removeClass("processing").unblock(),
          m.form.find(".input-text, select, input:checkbox").trigger("blur");
        e = "";
        a("#add_payment_method").length && (e = a("#add_payment_method")),
          a("#order_review").length && (e = a("#order_review")),
          (e = a("form.checkout").length ? a("form.checkout") : e).length && a("html, body").animate({
            scrollTop: e.offset().top - 100
          }, 500),
          a(document.body).trigger("checkout_error"),
          m.unblock()

And the



console.log(r.error.message),

row is highlighted.


I have also tried to bind to the error message text itself like this:

jQuery('.woocommerce-error li').each(function(){
                var error_text = $(this).text();
                if (error_text == 'The card number is incomplete.'){
                     
                        jQuery('button#place_order').removeClass('my_class');

but it still won't work, the class will not be removed.

I have also tried to use toggleClass instead, still won't work.

What I have tried:

I can correctly add the class on button click like this:
<pre lang="Javascript">$('form.checkout').on('submit', function(event) {
      event.preventDefault();
      $('button#place_order').addClass('my_class');