check not allowed characters within the input and alert user

Question

Good morning. On a system I’m working on, there’s this input inside the first div, and I need to check when the user type the letters I, The, Q in any of the 17 characters of the input, a text appears in the div "Resch" stating that he typed one of these letters, and do not let him continue writing until he deletes these characters.

<div class="col-xs-4 col-md-4">
   <input id="txtCh" name="Ch" style="text-transform: uppercase;" onCut="return false" maxlength="17"/>
</div>
<div id="resCh" class="col-sm-4 col-md-4" style="color:red"></div>

The validation is to be done in JS, I’m starting in JS, yet, and I tried to do this function, but did not meet me:

function isValidChar() {
    const alert = "INPUT CONTÉM LETRAS PROIBIDAS (I, O, Q)";

    const res = document.querySelector("#resCh");
    let written = document.querySelector("#txtCh").value;
    if (
        written.indexOf("o") != -1 ||
        written.indexOf("i") != -1 ||
        written.indexOf("q") != -1 ||
        written.indexOf("O") != -1 ||
        written.indexOf("I") != -1 ||
        written.indexOf("Q") != -1
    ) {
        document.getElementById("resCh").innerHTML = alert;
        document.getElementById("resCh").style.display = "block";
    } else {
        document.getElementById("resCh").style.display = "none";
    }

   }

**an Edit: ** I need to monitor the click too, to validate this message... I tried to make a:

document.documentElement.onclick = function(event) {
      if (event.target !== res) {
        res.style.display = "block";
      }
      else{
        res.style.display = "none";
      }
    }

but I ended up bugging the message, I don’t know what’s wrong.

Grateful from now on

Answer 1

To check the invalid characters you can use the .test() with the regular expression below:

/[oiq]/i.test(written)

The whole [oiq] checks if the string contains the letters o, i or q, and the flag i ignores whether it is uppercase or lowercase.

In the input you will use 3 events, calling the same function: onpaste, onkeypress and oninput:

<input id="txtCh" name="Ch" onpaste="isValidChar(event)" onkeypress="isValidChar(event)" oninput="isValidChar()" style="text-transform: uppercase;" onCut="return false" maxlength="17"/>

Like the events onpaste and onkeypress are cancellable you will send to the function the event with event as parameter, and in the function will receive it as argument:

function isValidChar(e) {
                     ↑

If any of the invalid characters are entered in the input, you will cancel the event onkeypress or onpaste with preventDefault(), causing nothing to be inserted into the field until the invalid character is deleted.

The event onpaste is fired when the user tries to paste a text into the field.

See working:

function isValidChar(e) {

    const alert = "INPUT CONTÉM LETRAS PROIBIDAS (I, O, Q)";

    const res = document.querySelector("#resCh");
    let written = document.querySelector("#txtCh").value;
    if (/[oiq]/i.test(written)) {
        document.getElementById("resCh").innerHTML = alert;
        document.getElementById("resCh").style.display = "block";
        if(e) e.preventDefault();
    } else {
        document.getElementById("resCh").style.display = "none";
    }

}

<div class="col-xs-4 col-md-4">
   <input id="txtCh" name="Ch" onpaste="isValidChar(event)" onkeypress="isValidChar(event)" oninput="isValidChar()" style="text-transform: uppercase;" onCut="return false" maxlength="17"/>
</div>
<div id="resCh" class="col-sm-4 col-md-4" style="color:red"></div>