Validate First and Last Name in JavaScript?

Navigation
1

I have a form called 'cad' for registration, my only missing validation is the first and last name, the id, 'txtname' and 'txtsname', I need a function that validates them as follows: can only have letters, no symbols, points and numbers, only letters, and can not have spaces. For example, in the field name, I will only enter the name, example 'Peter' and nothing else after, and the surname only himself and nothing later, if no error returns. I looked for such functions on the internet but I tested them all and it seems that none of them are really working. Thank you for your attention. 

function muitoCurto(campo, nome, tamanho) {

  if (campo.value.length >= tamanho) return false;

  alert("O conteúdo do campo '" + nome

        + "' deve ter pelo menos " + tamanho + " caracteres."

        + " Por favor, preencha-o corretamente.");

  return true;

}


function tamanhoErrado(campo, nome, tamanho) {

  if (campo.value.length === tamanho) return false;

  alert("O conteúdo do campo '" + nome

        + "' deve ter exatamente " + tamanho + " caracteres. "

        + "Por favor, preencha-o corretamente.");

  return true;

}


function naoNumerico(campo, nome) {

  if (!isNaN(campo.value)) return false;

  alert("Digite somente números no campo '" + nome + "', por favor.");

  return true;

}


function diferentes(campo1, nome1, campo2, nome2) {

  if (campo1.value === campo2.value) return false;

  alert("Os campos '" + nome1 + "' e '" + nome2 + "' devem ser iguais.");

  return true;

}


function letras(){

  tecla = event.keyCode;

  if (tecla >= 48 && tecla <= 57){

    return false;

  }else{

    return true;

  }

}


function validarstring($string) {

  return !!preg_match('|^[\pL\s]+$|u', $string);

}









function validarFormulario() {

  var cad = document.getElementById('cad');


  if (muitoCurto(cad.txtnome, 'Nome', 2)) return;

  if (muitoCurto(cad.txtsobrenome, 'Sobrenome', 2)) return;

  if (tamanhoErrado(cad.txtCPF, 'CPF', 11)) return;

  if (tamanhoErrado(cad.txtDDD, 'DDD', 2)) return;

  if (muitoCurto(cad.txtContato, 'Nº do telefone', 8)) return;

  if (muitoCurto(cad.txtEmail1, 'E-mail', 10)) return;

  if (muitoCurto(cad.txtRua, 'Logradouro', 3)) return;

  if (muitoCurto(cad.txtBairro, 'Bairro', 3)) return;

  if (muitoCurto(cad.txtCidade, 'Cidade', 3)) return;

  if (muitoCurto(cad.txtNumero, 'Número do endereço', 1)) return;

  if (tamanhoErrado(cad.txtCep, 'CEP', 8)) return;

  if (muitoCurto(cad.txtLogin, 'Nome de usuário', 7)) return;

  if (muitoCurto(cad.txtsenha, 'Senha', 6)) return;

  if (muitoCurto(cad.txtCsenha, 'Confirmação da senha', 6)) return;

  if (naoNumerico(cad.txtCPF, 'CPF')) return;

  if (naoNumerico(cad.txtDDD, 'DDD')) return;

  if (naoNumerico(cad.txtContato, 'Nº do telefone')) return;

  //if (naoNumerico(cad.txtNumero, 'Número')) return;

  if (naoNumerico(cad.txtCep, 'CEP')) return;


  if (diferentes(cad.txtsenha, 'Senha', cad.txtCsenha, 'Confirmação da Senha')) return;

  if (diferentes(cad.txtEmail1, 'E-mail', cad.txtEmail2, 'Confirmação de E-mail')) return;


  if (cad.txtdata_nasc.value.length !== 10) {

    alert("Formato de 'data de nascimento' inválido."

          + " Por favor, preencha-o corretamente.");

    return;

  }


  if (!validaCPF(cad.txtCPF.value)) {

    alert("Você digitou um CPF inválido, por favor, insira-o corretamente.");

    return;  

  }

  if (!validarstring(cad.txtdata_nasc.value)) {

    alert("não pode");

    return;  

  }












  cad.submit();

}


function validaCPF(cpf)

{

  var numeros, digitos, soma, i, resultado, digitos_iguais;

  digitos_iguais = 1;

  if (cpf.length < 11)

    return false;

  for (i = 0; i < cpf.length - 1; i++)

    if (cpf.charAt(i) != cpf.charAt(i + 1))

    {

      digitos_iguais = 0;

      break;

    }

  if (!digitos_iguais)

  {

    numeros = cpf.substring(0,9);

    digitos = cpf.substring(9);

    soma = 0;

    for (i = 10; i > 1; i--)

      soma += numeros.charAt(10 - i) * i;

    resultado = soma % 11 < 2 ? 0 : 11 - soma % 11;

    if (resultado != digitos.charAt(0))

      return false;

    numeros = cpf.substring(0,10);

    soma = 0;

    for (i = 11; i > 1; i--)

      soma += numeros.charAt(11 - i) * i;

    resultado = soma % 11 < 2 ? 0 : 11 - soma % 11;

    if (resultado != digitos.charAt(1))

      return false;

    return true;

  }

  else

    return false;

}
<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8">

    <title>Cadastro</title>

  </head>

  <body>

    <form id="cad" method="post" action="#" required>

      <h3>Dados pessoais</h3>

      Nome: <input type="text" name="txtnome" maxlength="40"   required />

      <br>

      Sobrenome: <input type="text" name="txtsobrenome" maxlength="30" required />

      <br>

      Data de nascimento: <input type="date" name="txtdata_nasc" required />

      <br>

      CPF: <input type="text" id="cpf1" name="txtCPF" maxlength="11" required />

      <br>


      <h3>Dados para Contato</h3>

      DDD: <input type="text" name="txtDDD" placeholder="Ex: (###)"  maxlength="2" required /><br>

      Tipo: <input type="radio" name="rbT" value="Celular" checked />Celular

      <input type="radio" name="rbT" value="Telefone" />Telefone

      <br>  

      Nº: <input type="tel" name="txtContato" maxlength="9" required  />

      <br>  

      E-mail: <input type="email" name="txtEmail1" maxlength="50" id="Email1" placeholder="[email protected]" required />

      <br>

      Confirmação de E-mail: <input type="email" name="txtEmail2" maxlength="50" id="Email2" required />

      <br>


      <h3>Dados do Endereço</h3>

      Logradouro: <input type="text" name="txtRua" maxlength="50" required />

      <br>

      Bairro: <input type="text" name="txtBairro" maxlength="35" required />

      <br>

      Cidade: <input type="text" name="txtCidade" maxlength="25" required />

      <br>

      Estado:

      <select name="cbEstado" required>

        <option>Acre</option>    

        <option>Alagoas</option>

        <option>Amapá</option>

        <option>Amazonas</option>

        <option>Bahia</option>

        <option>Brasília</option>

        <option>Ceará</option>

        <option>Espírito Santo</option>

        <option>Goiás</option>

        <option>Maranhão</option>

        <option>Mato Grosso</option>

        <option>Mato Grosso do Sul</option>

        <option>Minas Gerais</option>

        <option>Pará</option>

        <option>Paraíba</option>

        <option>Paraná</option>

        <option>Pernambuco</option>

        <option>Piauí</option>

        <option>Rio de Janeiro</option>

        <option>Rio Grande do Norte</option>

        <option>Rio Grande do Sul</option>

        <option>Rondônia</option>

        <option>Roraima</option>

        <option>Santa Catarina</option>

        <option>São Paulo</option>

        <option>Sergipe</option>

        <option>Tocantins</option>

      </select>

      <br>

      Número: <input type="text" name="txtNumero" maxlength="7" required />

      <br>

      CEP: <input type="text" name="txtCep" placeholder="Ex: #####-###" maxlength="8" required />

      <br>

      Complemento: <input type="text" name="txtComplemento" maxlength="40" />

      <br>


      <h3>Dados da conta</h3>

      Nome de usuário: <input type="text" name="txtLogin" required maxlength="20" />

      <br>

      Senha: <input type="password" name="txtsenha" required maxlength="20" />

      <br>

      Confirmação da senha: <input type="password" name="txtCsenha" required maxlength="20" />

      <br>

      Tipo de usuário: <input type="radio" name="rb" value="Usuario" checked />Cliente

      <input type="radio" name="rb" value="Tecnico" />Técnico

      <br>


      <button type="button" id="btn1" onclick='javascript: validarFormulario()'>Cadastrar</button>

    </form>

  </body>

</html>

I also put it in Google Drive

    
asked by anonymous 19.05.2018 / 06:33

1 answer

2

Use regex to validate fields where only letters are allowed: 

/[^a-zà-ú]/gi

Explanation of regex: 

[^...]  -> busca por ocorrências que não sejam as dentro dos colchetes
a-zà-ú  -> letras com ou sem acentos
gi      -> busca por toda a string (g) e não diferencia maiúsculas de minúsculas (i)

Also check that the fields are empty with !nome and !sobrenome .

Example: 

function validar(){

   console.clear();

   var nome = document.getElementById("txtnome").value;
   var sobrenome = document.getElementById("txtsobrenome").value;

   var padrao = /[^a-zà-ú]/gi;

   var valida_nome = nome.match(padrao);
   var valida_sobrenome = sobrenome.match(padrao);

   if( valida_nome || !nome ){
      console.log("Nome possui caracteres inválidos ou é vazio")
   }else{
      console.log("Nome Ok!")
   }

   if( valida_sobrenome || !sobrenome ){
      console.log("Sobrenome possui caracteres inválidos ou é vazio")
   }else{
      console.log("Sobrenome Ok!")
   }
}
<input type="text" id="txtnome" value="fulanÓo">
<br>
<input type="text" id="txtsobrenome" value="fulano1">
<br>
<button type="button" onclick="validar()">Validar</button>
    
19.05.2018 / 07:22
Principle value of a struct through pointers How to copy values from one vector to another quickly