JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <input type="text" />
    <input type="submit" />
    <br />
    <span> toggle invalid</span>
</form>

CSS

form { background:#0f0; }
form.invalid { background:#f00; }

JavaScript

$('form').on('change','input', function(){
    
$('form').removeClass('invalid').filter(':has(.woocommerce-invalid)').addClass('invalid');
    
});

// just for this example
$('span').on('click', function(){
    $('input[type=text]').toggleClass('woocommerce-invalid').trigger('change');
});