floating label validate txtbox not working correctly

[exceedinglife]

Hello all,

I have a form with text boxes and labels I have it so the labels look like they are in the text box and when you click in the text box the label moves to the top so it’s a ‘floating label’  I have it set to validation If the textbox is empty the label moves back to looking like its in the textbox. I have the name=”text” all work perfectly I want to make my email box work. If the email has something in the textbox I want the label to stay on top of the textbox Currently It only stays on top of the email is in the correct format. I currently only use CSS but I would like it to work any way we can

<div class="row"> <div class="col-md-9 mb-md-0 mb-5">
      <form id="contact-form" name="contact-form" action="" method="post">                        <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>
.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;
}    <script type="text/javascript">
        $(document).ready(function () {
            var form = $("#contact-form");
            $(form).submit(function (event) {                
                if (this.checkValidity() == false) {
                    $(this).addClass("was-validated");
                    event.preventDefault();
                    event.stopPropagation();
                }
            $(":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;
                }
            });
  $(":input").click(function () {
                $(this).removeClass("is-valid is-invalid");
            })
            $(":reset").click(function () {
                $(":input").removeClass("is-valid is-invalid");
                $(form).removeClass("was-validated");
            });
        });
        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");
            }            
        }
    </script

 

[requinix]

Your email validation marks is-valid/is-invalid if the email is valid. Naturally. Your label is (presumably) set up to position itself based on whether the value is valid.

But you don't want that. It doesn't matter if the value is valid, you want the label to position itself based on whether the input has a value at all. So that's a different class you need to manage: one that is added or removed if the input is empty or not. And that would work the same way for all types of (textual) inputs - text, password, textarea, and email.