Force State/County field to be required in WooCommerce Shipping Calculator

Question

I am trying to make sure that the Shipping State field is selected in the shipping calculator.

Using the solution here works great for the City and Postcode fields like this:

 jQuery('#calc_shipping_city, #calc_shipping_postcode').prop('required', true);

However, I have tried several different ID's and cant get this to work for the State field.

Answer 1

As Shipping state field is displayed optionally depending on the chosen country, you need to target the shipping calculator form changes to set the "required" property, like:

jQuery(function($){
    $('#calc_shipping_city, #calc_shipping_postcode').prop('required', true);

    $(document.body).on('change', 'form.woocommerce-shipping-calculator', function(){
        $('#calc_shipping_state').prop('required', true);
    });
} );

Now it should work.