JSFiddle - React, Tailwind, and code Playground

HTML

<form id="form" class="checkout">
    <p>
        <input type="text" name="one" class="required" placeholder="*">
    </p>
    <p>
        <input type="text" name="two">
    </p>
    <p>
        <input type="text" name="three" class="required" placeholder="*">
    </p>
    <p>
        <input type="text" name="four">
    </p>
    <p>
        <input type="text" name="five" class="required" placeholder="*">
    </p>
    <p>
        <input type="submit" value="Отправить">
    </p>
</form>
<div id="billing-box">billing-box не активен</div>

CSS

.red {
    box-shadow: 0 0 3px red inset;
}
input[type="text"] {
    border: 1px solid #000;
}

JavaScript

jQuery('#form.checkout').submit(function (e) {
    $(this).find('.required').each(function () {
        if ($(this).val() == '') {
            $(this).addClass('red');
        } else {
            $(this).removeClass('red');
        }
    });
    if ($('.red').length > 0) {
        $('#billing-box').addClass('active').empty().text('billing-box активен');
        e.preventDefault();
    } else {
        $('#billing-box').removeClass('active').empty().text('billing-box не активен');
    }
});