Click here to Skip to main content
14,486,704 members
Rate this:
Please Sign up or sign in to vote.
Hi Team

I have textbox and javascript that does error handling, but my label for when textbox leaves it shift the position and the text to receive error be on the left. How can i fix this be user friendly? Below is my logic for my view and javascript, please assist to make it better.

What I have tried:

<div class="row">
                           <label for"Email">Email:</label>
                           <label id="labelMessage" class="text-danger" style="display:none">This field is required</label>
                           <div class="input-group col-md-4 col-md-offset-2 col-sm-2 col-xs-2">
                               <div class="input-group pull-right">
                                                   
                                   @Html.TextBoxFor(m => m.Email, new
                                 {
                                     @class = "form-control",
                                     type = "email",
                                     id = "inputEmail",
                                     placeholder = "Email address",
                                     autofocus = "autofocus"
                                 })
                                   <div class="input-group-append">

                                       <div class="input-group-text">

                                       </div>
                                   </div>
                               </div>
                           </div>
                       </div>


<script type='text/javascript'>
    $(function () {
        //When the blur event occurs from your Textbox (you lose focus)
        $('#inputEmail').blur(function () {
            var email = document.getElementById("inputEmail").value;
            var expr = /^([\w-\.]+)@@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
            if (!expr.test(email)) {
                document.getElementById("labelMessage").style.display = "inline";
            }
            else {
                document.getElementById("labelMessage").style.display = "none";
            }
        });
    });
</script>
Posted

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




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100