Textbox floating label doesn’t float for email jquery validation text works email format incorrect only

[exceedinglife]

Hello all,

 

I am validation off bootstrap currently so it validates all $(“:input”) and I use a switch statement so it does case “text” case “password” and case “textarea”

I want to validate a case “email” or by the #ID and have it be with the same CSS of of a textbox. Because I have floating labels for when the textboxes and textareas are in focus.

In focus their labels move on top of them. Not in focus if empty label moves back to looking like its inside of it.

Everything works properly EXCEPT my EMAIL textbox.

I want the validate to work for an email address but if I set the switch case to email if the email is not in correct format the label moves back to looking like its inside the textbox so BOTH the LABEL and content is in the text box.

I want it so if something is in the email textbox the label STAYS on top (translate3d) I could use JavaScript, JQuery, or CSS.

Here is what I have.

/*<!—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");
            }            
        }

 

[requinix]

I believe last time you mentioned this, I told you that your validation needs to be not on the value of the input but on whether there is any value at all.

Was that confusing? Is there an aspect of that idea that needs to be explained?

[exceedinglife]

Yes I know I asked this... This is my problem..

In my switch case is there a way i could have the case go off of id or something..

I have :

$(":input").blur(function () {
                let controlType = this.type;
 
                switch (controlType) {
                    case "text":
                    case "password":

 

My email textbox is type="text" 
I want one of the cases to somehow link that specific type=text textbox to a different case So i could have it go to my method I made for validating email.

[requinix]

Your email validation is the problem. You can't use it for this because the email validation is the problem. It works perfectly fine to validate an email but here you don't want it to validate the email. Here you want to use the label if the value is empty. Being empty has nothing to do with it being a valid email address.