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:
![](https://i.imgur.com/cZtHrxv.png)
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');