Texbox is not center focus when its validated shifts?

Hi Team

I need some improvement on my code, it validates the textbox for email, as soon it does it shift the texbox and allow that error be on the left. Could this be div class= input-group pull-left be the reason? See my logic and does not look right to a user it may lead to a bug.

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

Hi Gcobani,

All error message should be right side of input as per standard, Please use this code,

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

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Jignesh Kumar6y ago
Accepted answer
Hi Gcobani,

All error message should be right side of input as per standard, Please use this code,
class="row">


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

                                      class="input-group-text">
'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";
}
});
});

Guest User6y ago
Jignesh the logic seem to work, but my concern is texbox layout its fading out, only label error message is on focus inside, but the widght and its height its fading out. How can i prevent this not to be seen by user?