4

Bom dia. Num sistema em que eu estou trabalhando, existe esse input dentro da primeira div, e eu preciso verificar quando o usuário digitar as letras I, O, Q em qualquer um dos 17 caracteres do input, apareça um texto na div "resCh" informando que ele digitou uma dessas letras, e não deixe ele continuar escrevendo até ele apagar estes caracteres.

<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>

A validação é para ser feita em JS, estou iniciando em JS, ainda, e tentei fazer essa função, mas não me atendeu:

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

   }

**um edit: ** Preciso monitorar o clique também, para validar essa mensagem... tentei fazer um:

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

mas acabei bugando a mensagem, não sei o que está errado.

Grato desde já

1
  • Uma coisa que pode te ajudar na verificação é usar uma expressão regular. No seu if você pode usar if (/[iIoOqQ]/.test(written)) { .
    – Benilson
    Commented 16/03/2020 às 14:25

1 Resposta 1

3

Para checar os caracteres inválidos você pode usar o .test() com a expressão regular abaixo:

/[oiq]/i.test(written)

O conjunto [oiq] verifica se na string existe as letras o, i ou q, e a flag i ignora se for maiúsculo ou minúsculo.

No input você usará 3 eventos, chamando a mesma função: onpaste, onkeypress e oninput:

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

Como os eventos onpaste e onkeypress são canceláveis você irá enviar para a função o evento com event como parâmetro, e na função irá recebe-lo como argumento:

function isValidChar(e) {
                     ↑

Se algum dos caracteres inválidos for inserido no input, você irá cancelar o evento onkeypress ou onpaste com preventDefault(), fazendo com que nada possa ser inserido no campo até que o caractere inválido seja apagado.

O evento onpaste é disparado quando o usuário tentar colar um texto no campo.

Veja funcionando:

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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .