How to run a jQuery if the form fields have an error?

By default, the Billing Details will be hidden using the first two blocks of code.

But if there is a missing field to be filled, I would like to check the checkbox automatically.

But the last code is not working.

/* Displays the checkbox to Show / Hide billing details */
function checkbox_exibir_detalhes_faturamento_f( $checkout ) {
	echo ' <div id="div_checkbox_faturamento"> ';
		woocommerce_form_field(
			'checkbox_faturamento', array(
				'type'      => 'checkbox',
				'label'     => __('Exibir Detalhes de Faturamento', 'woocommerce'),
				'class'     => array('form-row-wide'),
				'clear'     => true
			),
			$checkout->get_value( 'checkbox_faturamento' )
		);
	echo ' </div> ';
}
add_action( 'woocommerce_before_checkout_billing_form', 'checkbox_exibir_detalhes_faturamento_f' );

/* Function that displays / hides billing details when clicking on the checkbox */
function conditionally_hide_show_new_field_f() {
	wc_enqueue_js( "
		jQuery('input#checkbox_faturamento').change(function(){
			if (! this.checked) {
			// Oculta se n?o marcado
			jQuery('.woocommerce-billing-fields__field-wrapper').fadeOut();
        	} else {
			// Exibe se marcado
			jQuery('.woocommerce-billing-fields__field-wrapper').fadeIn();
         	}
		}).change();
	");
}
add_action( 'woocommerce_after_checkout_form', 'conditionally_hide_show_new_field_f', 9999 );

/* Viewing billing details in case of errors */
function ajustando_mensagens_erro_checkout_f( $fields, $errors ){
	// Se houver erros de valida??o
	if( !empty( $errors->get_error_codes() ) ) {
		// Exibe detalhes de faturamento
		wc_enqueue_js( "jQuery('input#checkbox_faturamento').prop('true');" );
                return;
	}
}
add_action( 'woocommerce_after_checkout_validation', 'ajustando_mensagens_erro_checkout_f', 9999, 2);

Hi there,

This is a fairly complex development topic. I’m going to leave it open for a bit to see if anyone is able to chime in to help you out.

I can also recommend the WooCommerce Developer Resources Portal for resources on developing for WooCommerce.

You can also visit the WooCommerce Facebook group or the #developers channel of the WooCommerce Community Slack. We’re lucky to have a great community of open-source developers for WooCommerce, and many of our developers hang out there, as well.

Hello. I really appreciate your support.

I will try in the indicated places, if someone here can collaborate, I appreciate it, I’m almost there.

I think the issue is that you are trying to load some new JS via wc_enqueue_js on an ajax callback. wc_enqueue_js queues some JS to be output in the footer, which has already been printed and cannot be dynamically updated. Basically you are mixing your frontend/backend scripting a little here… though it could also be that .prop('true') should be .prop('checked', true). I didn’t test that.

What I would recommend (And seems to be working for me) is listening for the checkout_error JQuery trigger and dynamically checking the input then.

/* Function that displays / hides billing details when clicking on the checkbox */
function conditionally_hide_show_new_field_f() {
	wc_enqueue_js( "
		jQuery('input#checkbox_faturamento').change(function(){
			if (! this.checked) {
			// Oculta se n?o marcado
			jQuery('.woocommerce-billing-fields__field-wrapper').fadeOut();
        	} else {
			// Exibe se marcado
			jQuery('.woocommerce-billing-fields__field-wrapper').fadeIn();
         	}
		}).change();

                // Here's my new code listening for the checkout_error trigger
		jQuery( document.body ).on( 'checkout_error', function( e, error_message ) {
			jQuery('input#checkbox_faturamento').prop( 'checked', true).change();
		} );
	");
}
add_action( 'woocommerce_after_checkout_form', 'conditionally_hide_show_new_field_f', 9999 );

Hope that helps!

Katy @helgatheviking, you got it right.
I really appreciate your help.

Congratulations on your work collaborating with other users, and good luck in your competitions around the world: D

• This reply was modified 4 years, 3 months ago by delaitec.