Validate Name and Surname in Javascript?

Asked

Viewed 4,739 times

1

I have a form called 'Cad' of registration, my only validation that is missing is the name and surname, id, txtnome and txtsobrenome, I need a function that validates them as follows: Fields can only have letters, no symbols, points and numbers, only letters, and cannot have spaces. For example, in the name field, I will only type the name, example 'Pedro' and nothing else later, and in the last name only himself and nothing later, if no error returns. I looked for such functions on the internet but tested all and it seems that none is really working. Thanks for the 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 in Google Drive

javascript string
  • 2

    Have you tried ? If so, edit the question and ask what you tried. Don’t wait for someone to do something for you, try something, having difficulty, create a question explaining your problem or difficulty. Getting code ready will never develop.

  • Post the form code so we can see.

  • I need this for my tcc, I don’t have Javascript classes, what I can do by myself is validate fields q can’t contain letters, only numbers, with Nan. I can’t, so I’m asking someone to do.

  • @dvd I put my code there in the question

  • That is, you want me not to accept perfectly valid names?

1 answer

2


Use regex to validate fields where only letters are allowed:

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

Explanation of the 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 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>

  • Thank you, could you help me with a new problem? I’m having trouble implementing this code in my js, changing 'console.log' to 'Alert', I tried to do the following: I created a Function just to validate the name, first, like : Function validationname() { var name = Document.getElementById("txtnome"). value; var default = /[ a-zà-ã]/gi; var valida_name = name.match(default); if( valida_name || !name ){ Alert("Name has invalid characters or is empty"); }Else{ Alert("Name Ok!"); } }

  • and dps tried to call it that: if (!validanome(Cad.txtnome.value)) { Return; }

  • I tried calling it inside my Function validarFormulario()

  • what may have gone wrong?

  • I’ll take a look here.

  • Function validationname: function validanome(){&#xA; var nome = document.getElementById("txtnome").value;&#xA; var padrao = /[^a-zà-ú]/gi;&#xA; var valida_nome = nome.match(padrao);&#xA; return valida_nome || !nome ? false : true;&#xA;}

  • In the function validateFormulario, put: if(!validanome(cad.txtnome.value)){&#xA; alert("Nome possui caracteres inválidos ou é vazio");&#xA; return;&#xA; }

  • I did what you asked, but keep coming back error, I opened a question here in stack overflow now just trying to solve it, by the nick of sdkamda2323

  • https://answall.com/questions/300386/erro-ao-chamar-function-na-minha-p%C3%A1ginajavascript-help me#300390 this

  • Since you opened another question with the same problem, you should finish this question and let’s focus on the other.

Show 5 more comments

Browser other questions tagged javascript string

You are not signed in. Login or sign up in order to post.