disable add to cart button until required fields are filled out

Hello @aaronbennett2097,

Our plugin works in this way that after clicking the button Add to cart, the warning is showing with information which fields are required if they were empty.

But I will let know our team and maybe we will change this in the future. I’ll inform you if this happens.

Best regards,
Marta

Thank you Marta.

Think it’d work so much cooler if the buy button was disabled until all required info was entered.

That way it’s more seamless and feels more like woocommerce variable products where you can’t add until you have selected an option. It stops that extra step of having to go back and enter the info.

I’ll continue to look for a jQuery method in the meantime

Thank you and hope your team can make it happen ??

Stay safe
Aaron

Thank you and stay safe,
Marta

Hi Marta.

I found a jQuery solution you may choose to bake into the plugin ??

<script type="text/javascript">
		jQuery(".single_add_to_cart_button").prop('disabled', true);

			var toValidate = jQuery('#fpf_6796689, #fpf_6744940, #fpf_3566324'),
			    valid = false;
			toValidate.keyup(function () {
			    if (jQuery(this).val().length > 0) {
			        jQuery(this).data('valid', true);
			    } else {
			        jQuery(this).data('valid', false);
			    }
			    toValidate.each(function () {
			        if (jQuery(this).data('valid') == true) {
			            valid = true;
			        } else {
			            valid = false;
			        }
			    });
			    if (valid === true) {
			        jQuery(".single_add_to_cart_button").prop('disabled', false);
			    } else {
			        jQuery(".single_add_to_cart_button").prop('disabled', true);
			    }
			});

    </script>

The button has a :disabled selector until the “toValidate” #’s have content.

Aaron

Just refined this a bit more for anyone who is interested…

<script type="text/javascript">
		jQuery(".single_add_to_cart_button").prop('disabled', true);

			var toValidate = jQuery('.message-name input, .message-message textarea, .message-from input'),
			    valid = false;
			toValidate.keyup(function () {
			    if (jQuery(this).val().length > 0) {
			        jQuery(this).data('valid', true);
			    } else {
			        jQuery(this).data('valid', false);
			    }
			    toValidate.each(function () {
			        if (jQuery(this).data('valid') == true) {
			            valid = true;
			        } else {
			            valid = false;
			        }
			    });
			    if (valid === true) {
			        jQuery(".single_add_to_cart_button").prop('disabled', false);
			    } else {
			        jQuery(".single_add_to_cart_button").prop('disabled', true);
			    }
			});

    </script>

For my example, I have three fields…

1. name – text – with class message-name
2. message – textarea – with class message-message
3. from – text – with class message-from

The above jquery means you don’t have to locate the specific id of the field and, as in my case, if you have more than one fields group, you can use the CSS class’s for more flexibility.

Aaron