preciso fazer uma validação. É o seguinte: O campo só pode aceitar nomes normais, tipo:
João Pedro, Mateus Rodrigues etc.
Nomes como Fabio123 ou outros caracteres especiais não podem ser aceitos. Alguém pode me ajudar, não consegui fazer.
Use expressão regular: [A-Za-záàâãéèêíïóôõöúçñÁÀÂÃÉÈÍÏÓÔÕÖÚÇÑ ]
JQuery keyup function
jQuery('.nome').keyup(function () {
this.value = this.value.replace(/[^A-Za-záàâãéèêíïóôõöúçñÁÀÂÃÉÈÍÏÓÔÕÖÚÇÑ ]/g,'');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type="text" class="nome" value="" />
Javascript evento onclick
var re = /^[A-Za-záàâãéèêíïóôõöúçñÁÀÂÃÉÈÍÏÓÔÕÖÚÇÑ ]+$/
function testInfo(nomeInput){
var OK = re.exec(nomeInput.value);
if (!OK)
window.alert(document.getElementById("nome").value + " não é um nome válido!");
else
window.alert("Seu nome " + OK[0] + " é válido");
}
<input id="nome">
<button onclick="testInfo(document.getElementById('nome'));">Check</button>
Javascript evento onkeyup
function myFunction(nomeInput) {
var el = document.getElementById("nome");
var str = el.value;
var res = str.replace(/[^A-Za-záàâãéèêíïóôõöúçñÁÀÂÃÉÈÍÏÓÔÕÖÚÇÑ ]/g, "");
el.value = res;
}
<input type="text" class="nome" id="nome" value="" onkeyup="myFunction(document.getElementById('nome'));">
A resposta do amigo acima permite que você digite um caractere indesejado (números e símbolos) e depois ele se apaga, eu sinceramente não gosto desse padrão.. fica parecendo um BUG rs
Segue abaixo uma função em Jquery que não deixa com que o usuário digite números ou símbolos, permitindo somente letras maiúsculas, letras minúsculas, espaços e acentos ;)
jQuery(function($) {
document.querySelector("input#nome").addEventListener("input", function(){
const allowedCharacters="azertyuiopqsdfghjklmwxcvbnAZERTYUIOPQSDFGHJKLMWXCVBN ";
let newValue="";
this.value.split("").forEach(function(char){
if(in_array(char, allowedCharacters.split(""))) newValue+=char;
});
this.value=newValue;
});
function in_array(elem, array){
let isIn=false;
for(var i=0;i<array.length;i++){
if(elem==array[i]) isIn=true;
}
return isIn;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="nome" class="form-control" name="nome" placeholder="Insira Somente Letras">
Utilizando um placeholder com "Insira Somente Letras" você deixa claro para o usuário o porque ele não consegue inserir outros caracteres..
Espero que possa ajudar alguem =]