Как выровнять текстовое поле, чтобы оно было в фокусе, когда отображается сообщение о подтверждении ошибки? - PullRequest
Новая
       10

Как выровнять текстовое поле, чтобы оно было в фокусе, когда отображается сообщение о подтверждении ошибки?

0 голосов
/ 20 марта 2020

У меня есть текстовое поле, которое проверяет сообщение об ошибке при выходе из него, оно показывает сообщение пользователю. Но он выталкивает текстовое поле влево вместо сообщения, отображаемого в центре. Как мне создать эту логику c?

enter image description here

Я сделал следующие логи c, чтобы использовать jquery для обработки обработка ошибок и использование метки для class = "text-danger". У меня есть изображение, чтобы показать, чего я хочу достичь точно. Как улучшить эту логику c. 

<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">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            @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>
...