Проверка длины текстового поля после автозаполнения - PullRequest
Новая
       7

Проверка длины текстового поля после автозаполнения

0 голосов
/ 19 апреля 2019

Я использую комбинацию CSS, HTML + C # и Jquery 3.1.1 на странице входа, полученной из этого bootsnip . Я пытаюсь включить / отключить кнопку входа в систему в зависимости от того, заполнены ли поля имени пользователя и пароля (длина> 0).

Код бритвы в вопросе: 

<div class="form-group">
    @Html.TextBoxFor(m => m.UserName, new { @class = "textbox", placeholder = "Username", id = "userName", name="userName", autofocus = "autofocus" })
    @Html.ValidationMessageFor(m => m.UserName, "", new { @class = "text-danger" })
</div>
<div class="form-group">
    @Html.PasswordFor(m => m.Password, new { @class = "textbox", placeholder = "Password", id="password", name="password"})
    @Html.ValidationMessageFor(m => m.Password, "", new { @class = "text-danger" })
</div>
<div class="col-xs-6 form-group checkbox">
    @Html.CheckBoxFor(m => m.RememberMe, new { @class = "form-control checkbox" })
    <label for="checkbox1">Remember Me</label>

</div>
<div class="col-xs-6 form-group" style="padding:0px;">
    <input type="submit" name="login-submit" id="login-submit" tabindex="4" class="btn btn-cust" value="Log In" onclick="form.submit()">
</div>

JQuery: 

@Scripts.Render("~/bundles/jquery")
<script type="text/javascript">
    // Creates a disable state for input types
    jQuery.fn.extend({
        disable: function (state) {
            return this.each(function () {
                var $this = $(this);
                if ($this.is('input'))
                    this.disabled = state;
                else
                    $this.toggleClass('disabled', state);
            });
        }
    });

    //After each keypress checks if fields are populated
    $(".textbox").keyup(function () {
        var i = 0;
        $(".textbox").each(function () {
            if (this.value.length > 0) {
                i++;
            } else {
                i--;
            }
        });

        if (i == 2) {
            $('input[name="login-submit"]').disable(false);
        } else {
            $('input[name="login-submit"]').disable(true);
        }
    });

    // Checks if fields are populated from autofill
    setInterval((function checkAutoFill() {
        var i = 0;
        $(".textbox").each(function () {
            if ($(`#userName`).val().length > 0) {
                i++;
            } else {
                i--;
            }
        });

        if (i == 2) {
            $('input[name="login-submit"]').disable(false);
        } else {
            $('input[name="login-submit"]').disable(true);
        }
    }), 5000);
</script>

Функция keyup работает отлично, как и checkAutoFill, когда у меня нет имени пользователя и пароля. Тем не менее, когда я делаю текстовые поля имеют длину ноль? после заполнения. Это остается верным, пока я не выберу внутри коробки.

Что я пробовал:

  1. .focus (), автофокус = 'автофокус' и т. Д. -> автозаполнение снимает фокус
  2. различные версии .val () и селекторов -> всегда не имеют длины, пока я не щелкну в поле.
...