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.
<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;
}
$(":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");
}
}
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");
}
}
What I have tried:
switching around css many ways
textboxes work but email does not
validation on email when in focus doesnt work