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 texbox when leaving the field is validating well, but my problem is its fading with width and height, only error message is showing inside the textbox. It does not look good to a user might cause bug, need some help around to make it more effective.

What I have tried:

<pre>      <div class="row">
                            <div class="input-group col-md-4 col-md-offset-2 col-sm-2 col-xs-2">
                                <div class="input-group pull-right">
                                    <label for="Email">Email:</label>
                                                    
                                    @Html.TextBoxFor(m => m.HomeMainModel.Email, new
                                  {
                                      @class = "form-control",
                                      type = "email",
                                      id = "inputEmail",
                                      placeholder = "Email address",
                                      autofocus = "autofocus"
                                  })
                        <label id="labelMessage" class="text-danger" style="display:none">This field is required</label>
                                    <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
Updated 23-Mar-20 7:28am
Comments
ZurdoDev 23-Mar-20 7:36am
   
I don't know what you mean by fading.
MadMyche 23-Mar-20 8:36am
   
Aside from the appearance issue, is it working properly?
gcogco10 24-Mar-20 1:57am
   
It is working MadMyche, its just the error label

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 1

What you have at the moment: Edit fiddle - JSFiddle - Code Playground[^]

Assuming your concern is that the error label squashes the textbox, you need to move your error label to another column:
<div class="row">
    <div class="input-group col-md-4 col-md-offset-2 col-sm-2 col-xs-2">
        <div class="input-group pull-right">
            <label for="Email">Email:</label>
            @Html.TextBoxFor(m => m.HomeMainModel.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 class="col-md-6 col-sm-10 col-xs-10">
        <label id="labelMessage" class="text-danger" style="display:none">This field is required</label>
    </div>
</div>
Demo[^]
   

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

  Print Answers RSS
Top Experts
Last 24hrsThis month



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