Плавающая метка текстовое поле не плавает по электронной почте jQuery для текста работает только проверка электронной почты формат неправильный

---

Всем привет,

Я в настоящее время проверки от загрузки, поэтому он проверяет все $(“ввод”) и я использовать оператор switch, так что это не случай “текст” случай “пароль” и “текстовая область”
Я хочу проверить случай “электронная почта” или по #ID и иметь его с тем же CSS текстового поля. Потому что у меня есть плавающие метки для тех случаев, когда текстовые поля и текстовые области находятся в фокусе.
В фокусе их метки перемещаются поверх них. Не в фокусе, если пустая этикетка возвращается к тому, чтобы выглядеть так, как она выглядит внутри нее.
Все работает нормально, кроме моего текстового поля электронной почты.
Я хочу, чтобы проверка работала для адреса электронной почты, но если я установлю переключатель case на email, Если письмо не имеет правильного формата, метка снова будет выглядеть так, как будто она находится внутри текстового поля, так что и метка, и содержимое находятся в текстовом поле.
Я хочу, чтобы это было так, если что-то находится в текстовом поле электронной почты, метка остается сверху (translate3d) Я мог бы использовать JavaScript, JQuery или CSS.
Вот что у меня есть.

/*<!—HTML -->*/
<div class="row ">
                            <div class="col-md-6 ">
                                <div class="md-form mb-0 ">
                                    <input class="form-control" type="text" id="txtName" name="txtName" required />
                                    <label for="txtName">Your Name </label>
                                </div>
                            </div>
                            <div class="col-md-6 ">
                                <div class="md-form mb-0 ">
                                    <input class="form-control" type="text" id="txtEmail" name="txtEmail" required />
                                    <label id="lblEmail" for="txtEmail">Your Email Address </label>
                                </div>
                            </div>
                        </div>

/* CSS */
.md-form {
    position: relative;
    margin-top: 1rem;
}
.md-form .form-control {
    margin: 0 0 .5rem 0;
    padding: .3rem 0 .55rem 0;
    height: auto;
}
.md-form label {
    position: absolute;
    letter-spacing: .05em;
    padding-left: 5px;
    top: .65rem;
    transition: .2s ease-out;
    cursor: text;
    color: #757575;
}
.md-form .form-control:focus {
    border-bottom: 3px solid #181846;
}
.md-form .form-control:focus + label,
.md-form .form-control:valid + label {
    font-size: 85%;
    font-weight:700;
    transform: translate3d(0,-150%, 0);
    color: #181846;
    cursor: pointer;
}
/* JavaScript / jQuery */
            // Validate :inputs
            $(":input").blur(function () {
                let controlType = this.type;

                switch (controlType) {
                    case "text":
                    case "password":
                    case "textarea":
                        validateText($(this));
                        break;
                    case "email":
                        validateEmail($(this));
                        break;
                    default:
                        break;
                }
            }) // each :input focusin remove existing validation messages if any.
            $(":input").click(function () {
                $(this).removeClass("is-valid is-invalid");
            })

            /* OPTIONAL ':input' KEYDOWN validation messages remove */

            // Reset Form and remove all validation messages.
            $(":reset").click(function () {
                $(":input").removeClass("is-valid is-invalid");
                $(form).removeClass("was-validated");
            }) // Validate Text Function
        function validateText(control) {
            let textField = control.val();
            if (textField.length > 1) {
                $(control).addClass("is-valid");
            } else {
                $(control).addClass("is-invalid");
            }
        }

        // Validate Email Function (Email newer regex: /^([\w-\.]+@([\w-]+\.)+[\w-]{2,6})?$/  )
        function validateEmail(control) {
            let textField = control.val();
            let regexPattern = /^\b[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,6}\b$/i;
            if (regexPattern.test(textField)) {
                $(control).addClass("is-valid");
            } else {
                $(control).addClass("is-invalid");
            }            
        }

Что я уже пробовал:

переключение по CSS много способов
текстовые поля работают, но электронная почта-нет
проверка по электронной почте, когда она находится в фокусе, не работает

---