3

Preciso fazer uma função em JavaScript que ao clicar no botão verifique se foi digitado um caractere específico, neste caso o ' (aspas simples). Se sim, deve substituir a aspa simples por um espaço em branco.

Veja o código abaixo:

const charValidation = ()=> {
    let inputToValidate = document.querySelectorAll(".area-input input");
    for(i=0;i<inputToValidate.length;i++) {
        let inputZin = inputToValidate[i].value;
        if(inputZin.match(["\'"])) {
            let inputEr = inputZin.replace(/\'/g, "");
            inputZin.innerHTML = inputEr;

        }
    }
}
<span class="area-input">
  <input type="text" placeholder="nome"  title="não permitido caracteres especiais">
</span>
<span class="area-input">
  <input type="text" placeholder="telefone" title="apenas números">
</span>
<span class="area-input">
  <input type="text" placeholder="endereço" title="não permitido caracteres especiais">
</span>

<input type="button" onclick="charValidation()" value="OK">

Estava pensando em me livrar do match e simplesmente substituir direto.

4 Respostas 4

2

Você pode fazer o replace direto sem passar pelo match. O match só serve mesmo para verificar a existência ou capturar alguma coisa e obter o resultado. O replace irá apenas fazer a substituição caso exista o caractere, e se não existir, ele não faz nada e nem dá erro.

Outra coisa, a aspas simples não precisa de escape, e se a intenção é substituir por um espaço, seria " " em vez de "". Também pode eliminar algumas linhas de código, passando tudo de uma vez, como no código abaixo:

const charValidation = ()=> {
            let inputToValidate = document.querySelectorAll(".area-input input");
            for(let i=0;i<inputToValidate.length;i++) {
                inputToValidate[i].value = inputToValidate[i].value.replace(/'/g, " ");
            }
        }
<span class="area-input">
            <input type="text" placeholder="nome"  title="não permitido caracteres especiais">
        </span>
        <span class="area-input">
            <input type="text" placeholder="telefone" title="apenas números">
        </span>
        <span class="area-input">
            <input type="text" placeholder="endereço" title="não permitido caracteres especiais">
        </span>

        <input type="button" onclick="charValidation()" value="OK">

Coloque também um let no i do for para restringir o escopo da variável apenas dentro do for.

4
  • 1
    Não seria melhor usar replace("'", " ") ao invés de compilar uma RegExp pra cada vez? 17/12/2018 às 18:27
  • 1
    Não porque senão só vai substituir 1 ocorrência.
    – Sam
    17/12/2018 às 18:39
  • 1
    Putz, caí nessa pegadinha. É verdade! 17/12/2018 às 18:39
  • todas as respostas funcionaram, mas eu gostei mais do seu código e das dicas! agora sempre vou usar um let ou const antes da variável no laço "for" muito obrigado!
    – MSHijo
    18/12/2018 às 11:47
2

usa esta função

$('input').keypress(function(e){
   if(String.fromCharCode(event.which) == "'"){
       event.preventDefault()
       $(this).val(str + ' '); 
   }
});

onde o input vc poe a classe do seu campo.

1

Fala Jovem , beleza?

Usa o .each e o indexOf ..

Acho que isso funciona bem :)

function charValidation(){

        $(".area-input input").each(function( index ) {
          var str = $(this).val();           
          if(str.indexOf("'") != -1 ){
            str = str.replace(/\'/g, "");
             $(this).val(str);
          }              
        });
}

O each vai fazer o papel do loop :)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script  src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
</head>
<body>
	<span class="area-input">
            <input type="text" placeholder="nome"  title="não permitido caracteres especiais">
        </span>
        <span class="area-input">
            <input type="text" placeholder="telefone" title="apenas números">
        </span>
        <span class="area-input">
            <input type="text" placeholder="endereço" title="não permitido caracteres especiais">
        </span>

        <input type="button" onclick="charValidation()" value="OK">
</body>
<script>
	
		function charValidation(){

			$(".area-input input").each(function( index ) {
		      var str = $(this).val();		     
		      if(str.indexOf("'") != -1 ){
		      	str = str.replace(/\'/g, "");
		      	 $(this).val(str);
		      } 		     
		    });
		}
	
</script>
</html>

1

Dá pra usar replace com RegExp:

document.querySelectorAll('.area-input > input').forEach(i => i.value = i.value.replace(/'/g,' '))  

Ou split com join:

document.querySelectorAll('.area-input > input').forEach(i => i.value = i.value.split('\'').join(' ')) 

const charValidation = () => {
           
document.querySelectorAll('.area-input > input').forEach(i => i.value = i.value.replace(/'/g,' '))       
        
}

const charValidation2 = () => {
           
document.querySelectorAll('.area-input > input').forEach(i => i.value = i.value.split('\'').join(' '))  
        
}
<span class="area-input">
  <input type="text" placeholder="nome"  title="não permitido caracteres especiais">
</span>
<span class="area-input">
  <input type="text" placeholder="telefone" title="apenas números">
</span>
<span class="area-input">
  <input type="text" placeholder="endereço" title="não permitido caracteres especiais">
</span>
<p></p>
<input type="button" onclick="charValidation()" value="com RegExp">
<input type="button" onclick="charValidation()" value="com Split">

2
  • 1
    po cara eu gostei desse código, é completamente diferente do que eu tinha pensado. Eu não conhecia esse "forEach" ele funciona da mesma forma que o laço "for"? vou dar uma pesquisada! orbigado pela ajuda!
    – MSHijo
    18/12/2018 às 11:50
  • @MSHijo, ambos vão percorrer o array elemento por elemento, mas eu acho forEach muito mais intuitivo e fácil de ler, ainda mais se você precisar fazer um loop dentro de outro. Só uso o for quando a performance for uma preocupação e o break for crucial para isso. No forEach não existe essa possibilidade de break. Você ler sobre o forEach aqui: developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/…
    – LLeon
    18/12/2018 às 12:17

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 .