javascript 表单实时输入验证，oninput 无法按预期工作

Question

I have a list of valid promo codes, say ["one","two","three"] I have an input field called promo code where users can input their promo code, if they have one.

When the user's input matches an item in the list, we should do X. If the user's input does not match an item in the list, we should do Y.

code that works:

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>

Code that doesn't work:

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';
        }
  }
}

The HTML is the same in both cases.

The code that doesn't work isn't completely broken; It displays "your promo code is invalid" correctly. It also changes the 'formErrorMessage' to display an empty string when the promo code input is empty. Yet it doesn't register when the entered promo code matches one of the valid promo codes..

What am I doing wrong?

Thanks in advance!

Answer 1

In the case you found a valid promoCode matching the input, you should break , otherwise your "valid" result may be overridden. You code will display "Your promo code is valid!" only if the input code is the last in the promoCodes array.

Another way of doing this, without looping explicitly (thus avoiding this kind of override):

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';
}

Alternatively, promoCodes.indexOf(enteredCode) >= 0 if you don't like includes . Like for MSIE compatibility I suppose.

That being said:

users can input their promo code, if they have one

If these "promo codes" are not supposed to be known by everybody, you may want to keep them on the server and check the validity from there, and not send them to the client: one would just need to display the source to find coupon codes for free.