Click here to Skip to main content
15,867,686 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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.


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


What I have tried:

switching around css many ways
textboxes work but email does not
validation on email when in focus doesnt work
Posted
Comments
jaket-cp 9-Jan-19 10:54am    
Having a quick look at the code - I assume validateEmail($(this)); is not being called as the Markup
[input class="form-control" type="text" id="txtEmail" name="txtEmail" required /]
type is text and not email
jaket-cp 9-Jan-19 11:08am    
added to a fiddle and change the type to email
http://jsfiddle.net/jaket/86f9rc7q/2
have a look
TheBigBearNow 9-Jan-19 14:27pm    
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.
jaket-cp 11-Jan-19 4:22am    
did you check the fiddle http://jsfiddle.net/jaket/86f9rc7q/2?
I changed the input type from text to email for input id txtEmail.

Also if you click on the 'Reply' button - then codeproject will inform the user they have a message reply or something.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900