проверка ввода в реальном времени в форме JavaScript с использованием oninput не работает должным образом

Question

У меня есть список действительных промо-кодов, скажем, ["one","two","three"] У меня есть поле ввода с именем промо-код , где пользователи могут ввести свой промо-код, если он у них есть.

Когдаввод пользователя соответствует элементу в списке, мы должны сделать X. Если ввод пользователя не соответствует элементу в списке, мы должны сделать Y.

код, который работает:

JS:

    function checkPromo() {
        var promoCodes = [{% for code in promo_codes %} "{{code}}", {% endfor %}];
        var arrayLength = promoCodes.length;
        var enteredCode = document.getElementById('promoCode').value;
        var message = document.getElementById('formErrorMessage');

        for (var i = 0; i < arrayLength; i++) {
            if (enteredCode == promoCodes[i]) {
                message.innerHTML = '<br /><p class="promoMessageValid">Your promo code is valid!</p>';
            } 
        }                                                             
    }

HTML:

<form>
    ...                                                             
    <div class="row">
        <div class="field half-width">
            <input type="text" placeholder="Promo Code" class="input empty" id="promoCode" maxlength="8" oninput="checkPromo()">
            <label for="promo">Promo Code</label>
            <div class="baseline"></div>
        </div>
    </div>                                                         
    ...                                                            
    <div class="error field" role="alert">
        <span class="message" id="formErrorMessage"></span>
    </div>                                          
</form>

Код, который не работает:

JS:

function checkPromo() {
    var promoCodes = [{% for code in promo_codes %} "{{code}}", {% endfor %}];
    var arrayLength = promoCodes.length;
    var enteredCode = document.getElementById('promoCode').value;
    var message = document.getElementById('formErrorMessage');

    for (var i = 0; i < arrayLength; i++) {
        if (enteredCode == promoCodes[i]) {
            message.innerHTML = '<br /><p class="promoMessageValid">Your promo code is valid!</p>';
        } else if (enteredCode == '') {
            message.innerHTML = '';
        } else {
            message.innerHTML = '<br /><p class="promoMessageInvalid">Your promo code is invalid';
        }
  }
}

HTML-код одинаков в обоих случаях.

Код, который нене работает полностью сломан;Он отображает «Ваш промо-код неверен» правильно.Это также изменяет 'formErrorMessage', чтобы отображать пустую строку, когда ввод промокода пуст.И все же не регистрируется , когда введенный промо-код совпадает с одним из действительных промо-кодов ..

Что я делаю не так?

Заранее спасибо!

Answer 1

В случае, если вы нашли действительный promoCode, соответствующий вводу, вы должны break, в противном случае ваш "действительный" результат может быть переопределен.Ваш код будет отображать "Ваш промо-код действителен!" только , если входной код является последним в массиве promoCodes.

Другой способ сделать это без явного зацикливания (таким образом избегая такого типа переопределения):

if (!enteredCode) {
  message.innerHTML = '';
} else if (promoCodes.includes(enteredCode)) {
  message.innerHTML = '<br /><p class="promoMessageValid">Your promo code is valid!</p>';
} else {
  message.innerHTML = '<br /><p class="promoMessageInvalid">Your promo code is invalid';
}

Или promoCodes.indexOf(enteredCode) >= 0, если вам не нравится includes.Как и в случае совместимости с MSIE.

При этом:

пользователи могут ввести свой промо-код, если у них есть один

Если эти "промокоды "не должны быть известны всем, вы можете захотеть сохранить их на сервере и оттуда проверить их правильность, а не отправить их клиенту: нужно просто отобразить источник длянайти коды купонов бесплатно.