Code for Client Side Validation

I have some impatient customers that multiple click on the woocommerce add-to-cart button so rather than disabling the button after form submission I have created a fake disabled button that states ‘Adding to cart. Please wait…’. Through the use of jquery, when a customer clicks on the normal add-to-cart button, that button is hidden and my fake button shows. By use of css the fake button is located in the exact same position as the real add-to-cart button so no one is any the wiser and I think this method is cross browser friendly.

This works great for simple and variable products to prevent multiple submissions but custom products with required fields is another story. My custom products have two required fields. One is a text field (name) the other is radio buttons (yes or no answer). With ‘Client Side Validation’ disabled when a customer clicks on the real add-to-cart button that button is hidden and my fake button shows. If there is an error the fake button is then hidden and the real add-to-cart button shows allowing the customer to correct any errors and resubmit. Upon correction of errors and resubmission, the real button is hidden and the fake button shows.

With Client Side Validation enabled when a cutomer clicks on the real button and there is an error, my error message shows next to the field, as it is suppose to, and my fake add-to-cart button is shown but then it all stops there not allowing the customer to correct any errors and unable to resubmit. I surmise the error message appears before the form is actually submitted for validation so herein lies my problem.

I prefer using the Client Side Validation so the customer knows exactly where the error occurred without jumping to the top of the page and without having to scroll back down and try to find the problem. The Client Side Validation feature of your plugin is exactly what I need for my type of customized products. Excellent feature.

Is there any way this code I am using to show and hide the buttons can be modified to work with the Client Side Validation? Possibly triggering when the error message appears? Or maybe an all together better code?

//hide/show add to cart buttons

jQuery(document).ready(function ($) {
$(‘form.cart’).submit(function(){
var errors = [];
if(errors.length > 0){
$(“#btnone”).show();
$(“#btntwo”).hide();}
else{
$(“#btnone”).hide();
$(“#btntwo”).show();
}
});
});

Or maybe you could make something like this as part of your premium plugin of which I’ll be first in line to purchase even without this feature!

Any help on this one will be very much appreciated.
Thanks

https://www.ads-software.com/plugins/wc-fields-factory/