JSFiddle - React, Tailwind, and code Playground

by Daedalus

HTML

<div id="system-message-container">
    <form id="EditBTAddres" autocomplete="off">
        <div class="email-group">
            <div class="inner">
                <label class="email" for="email_field">E-Mail *</label>
                <input type="text" id="email_field" name="email" size="30" value="[email protected]" class="required" maxlength="100" style="width: 265px;">
            </div>
        </div>
        <div class="company-group">
            <div class="inner">
                <label class="company" for="company_field">Company Name</label>
                <input type="text" id="company_field" name="company" size="30" value="" maxlength="64" style="width: 265px;">
            </div>
        </div>
        <div class="first_name-group">
            <div class="inner">
                <label class="first_name" for="first_name_field">First Name *</label>
                <input type="text" id="first_name_field" name="first_name" size="30" value="" class="required" maxlength="32" style="width: 265px;">
            </div>
        </div>
        <div class="proopc-row group-enabled">
            <div class="middle_name-group">
                <div class="inner">
                    <label class="middle_name" for="middle_name_field">Middle Name</label>
                    <input type="text" id="middle_name_field" name="middle_name" size="30" value="" maxlength="32" style="width: 125px;">
                </div>
            </div>
            <div class="last_name-group">
                <div class="inner">
                    <label class="last_name" for="last_name_field">Last Name *</label>
                    <input type="text" id="last_name_field" name="last_name" size="30" value="" class="required" maxlength="32" style="width: 125px;">
                </div>
            </div>
        </div>
        <div class="address_1-group">
            <div class="inner">
                <label class="address_1" for="address_1_field">Address 1...

JavaScript

jQuery.fn.inputAlert = function (state, msg_txt) {
    if (state === true) {
        if (this.next(".input_alert").length === 0) {
            this.after("<div class='input_alert'>" + msg_txt + "</div>");
        }
    } else if (state === false) {
        this.next("div.input_alert").remove();
    }
    return this;
};

jQuery(function () {
    jQuery("#system-message-container").on("keyup blur", "#address_1_field,#shipto_address_1_field", function () {
        var $this = jQuery(this);
        if ($this.length > 0) {
            if (/p\.?o\.?.*?box/i.test($this.val()) === true) {
                if (jQuery("#STsameAsBT").prop("checked")) {
                    jQuery("#proopc-order-submit").attr("disabled", "disabled");
                    jQuery("#address_1_field,#shipto_address_1_field")
                        .css("border", "2px solid red")
                        .inputAlert(true, "P.O. Boxes are not allowed for this input");
                } else {
                    if ($this.attr("id") === "shipto_address_1_field") {
                        jQuery("#proopc-order-submit").attr("disabled", "disabled");
                        $this.css("border", "2px solid red")
                            .inputAlert(true, "P.O. Boxes are not allowed for this input");;
                    }
                }
            } else {
                jQuery("#proopc-order-submit").removeAttr("disabled");
                jQuery("#address_1_field,#shipto_address_1_field")
                    .css("border", "2px inset")
                    .inputAlert(false, "P.O. Boxes are not allowed for this input");
            }
        };
    });
    jQuery("#STsameAsBT").on("click", function () {
        var $this = jQuery(this);
        if ($this.prop("checked") === true) {
            if (/p\.?o\.?.*?box/i.test(jQuery("#address_1_field").val()) === true) {
                jQuery("#address_1_field,#shipto_address_1_field").css("border", "2px solid red")
               ...