Валидация в форме выбора при оформлении заказа WooCommerce

Question

Я изменил поле billing_city с текста на выпадающий и добавил к нему также пользовательскую проверку.

add_action('woocommerce_checkout_process', 'checkout_field_city_restriction');
function checkout_field_city_restriction() {
global $woocommerce;
// Check if set, if its not set add an error.
if ($_POST['billing_city'] == "Select your city")
wc_add_notice( 'Please select your city', 'error' );
}

В верхней части отображается ошибка, но поле не выделяется красным. Проделав некоторые раскопки, я обнаружил, что выпадающий список проверяется, даже если пользователь выбирает «Выбрать свой город».

Мне нужно, чтобы поле было выделено, и для этого мне нужно добавить Jquery для него. После еще одного исследования я нашел код, но он не работает, подскажите, пожалуйста, где я не прав?

add_action( 'wp_footer', 'hello_checkout_js' );
function hello_checkout_js(){

// we need it only on our checkout page
if( !is_checkout() ) return;

?>
<script>
jQuery(function($){
    $('body').on('blur change',  '#billing_city', function(){
var wrapper = $(this).closest('.form-row');
// you do not have to removeClass() because Woo do it in checkout.js
if("Select your city".test( $(this).val() ) ) { // check if contains numbers
    wrapper.addClass('woocommerce-invalid'); // error
} else {
    wrapper.addClass('woocommerce-validated'); // success
}
});
});
</script>
<?php
}