0

Как при вводе посчитать количество символов в объекте html input и вывести в сообщение с помощью JS?

Пытаюсь это делать так:

<script>
    inputTel.addEventListener('keyup', funcCount(evt));

    $("#inputTel").on("input", funcCount2);

    var funcCount2 = function () {
        let length = $("#inputTel").text(this.value.length);
        if (length > 12) msg.textContent = 'Количество символов не должно превышать 12!';
        else if (length < 11) msg.textContent = 'Количество символов не должно быть меньше 11!';
        alert(msg.textContent);
    }

    var funcCount = function (evt) {
        let length = this.value.length;
        if (length > 12) msg.textContent = 'Количество символов не должно превышать 12!';
        else if (length < 11) msg.textContent = 'Количество символов не должно быть меньше 11!';
        alert(msg.textContent);
    }
</script>

<div class="container">
<div class="row">
    <div class="col-sm-5"></div>
    <div class="col-sm-5">
        <form class="form-horizontal" asp-action="Register" asp-controller="Account" asp-anti-forgery="true" method="post">
            <div class="validation" asp-validation-summary="ModelOnly"></div>
            
            <div class="form-group">
                <label asp-for="Telephone">Телефон (в федерал. формате)</label><br />
                <input type="text" id="inputTel" asp-for="Telephone" />
                <span asp-validation-for="Telephone" />
            </div>
           
            <div class="form-group">
                <input type="submit" value="Зарегистрироваться" />
            </div>
        </form>
    </div>
</div>

Но это не работает. Подскажите где ошибка/ошибки?

Ошибки:

Uncaught ReferenceError: evt is not defined at Register:93

12
  • let length = $("#inputTel").text(this.value.length); -> let length = this.value.length; не оно?
    – XelaNimed
    6 апр 2021 в 8:52
  • Добавьте код ошибки в описание вопроса; 6 апр 2021 в 8:55
  • 1
    @Vlad-i-mir у вас при этом условии (length < 11) каждый "тык" будет alert вываливаться, если oninput или keyup используете. И если JQ используете то длину так получать надо $("#inputTel").val().length; А вообще сделать по кнопке общую валидацию. 6 апр 2021 в 9:37
  • 1
  • 1
    @XelaNimed тогда уж сюда docs.microsoft.com/en-us/dotnet/api/… ?
    – teran
    6 апр 2021 в 9:40

1 ответ 1

0
    const inputTel = document.querySelector('#inputTel')
    let msg
    inputTel.addEventListener('focusout', event=>{
        let length = inputTel.value.length
        if (length > 12) msg = 'Количество символов не должно превышать 12!'
        else if (length < 11) msg = 'Количество символов не должно быть меньше 11!'
        alert(msg);
    })

Думаю будет лучше использовать событие focusout или клик по кнопке, так как при каждом вводе в поле input будет всплывать alert

6
  • вы уверены, что во встроенных механизмах валидации форм ASP.net нет заданного функционала и надо городить вот это все?
    – teran
    6 апр 2021 в 9:29
  • есть, но хочется чтобы это выполнялось на фронте, чтобы меньше дергать сервер
    – Vlad-i-mir
    6 апр 2021 в 9:54
  • @Vlad-i-mir а вы считаете, что атрибуты применяются только для бекэнда?
    – teran
    6 апр 2021 в 10:55
  • @teran, нет не только, но обрабатываются они на бекэнде, или я не прав?
    – Vlad-i-mir
    6 апр 2021 в 11:19
  • 1
    @Vlad-i-mir вы же не с поделкой студента работаете а с глоабально распространенным фреймворком, естественно там тоже люди озадачивались тем, чтобы валидировать данные предварительно без отправки данных на бэкенд.
    – teran
    6 апр 2021 в 11:23

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.