2

Estou precisando de uma ajuda para validar um formulário utilizando apenas o JavaScript puro.

Não consigo fazer com que se, por exemplo, o usuário digitar números no campo de nome de usuário, apareça uma mensagem dando erro. O mesmo deve acontecer se o usuário por exemplo colocar um email inválido, tipo "aaaaaaaa".

Eu tentei fazer isso no nome de usuário, como mostra no código abaixo. Se ele deixa o campo em branco ou ultrapassa os 16 caracteres o erro funciona normalmente. Se ele preenche a mensagem some, mas se ele colocar números e outras coisas a mensagem que era para aparecer não aparece.

JavaScript:

function validar(){
    var usuario = document.getElementById("usuario").value;
    var email = document.getElementById("email").value;
    var senha = document.getElementById("senha").value;
    var confirmarsenha = document.getElementById("confirmar-senha").value;
    var usuario_correto = /^[A-Za-z]+$/;
    var valido = true;

    if(usuario.length < 2 || usuario.length > 16) {
        document.getElementById("msg-usuario").innerHTML="* O nome de usúario precisa ter entre 2 a 16 caracteres";
        valido = false;
    }else if (usuario.match(usuario_correto)) {
        document.getElementById("msg-usuario").innerHTML="* O nome de usúario só pode ter letras [A-Z/a-z]"; 
        valido = false;
    }else{
        document.getElementById("msg-usuario").innerHTML="";
    }

    if(email=="") {
        document.getElementById("msg-email").innerHTML="* O email é obrigatório";
        valido = false;
    }else{
        document.getElementById("msg-email").innerHTML="";
    }
    
    if(senha.length < 5 || senha.length > 16) {
        document.getElementById("msg-senha").innerHTML="* A senha precisa conter de 5 a 16 caracteres";
        valido = false;
    }else{
        document.getElementById("msg-senha").innerHTML="";
    }

    if(confirmarsenha=="") {
        document.getElementById("msg-confirmar-senha").innerHTML="* Confirme a senha";
        valido = false;
    }else{
        document.getElementById("msg-confirmar-senha").innerHTML="";
    }
    
    return valido;
}

Formulário:

<form class="form-registrar" onsubmit="return validar()">
    <input type="text" placeholder="Nome de usúario" class="form-campo" id="usuario"> 
    <div class="form-msg-erro" id="msg-usuario"></div>

    <br>
    <input type="text" placeholder="Email" class="form-campo" id="email"> 
    <div class="form-msg-erro" id="msg-email"></div>

    <br>
    <input type="text" placeholder="Senha"  class="form-campo" id="senha"> 
    <div class="form-msg-erro" id="msg-senha"></div>

    <br>
    <input type="text" placeholder="Confirmar senha" class="form-campo" id="confirmar-senha"> 
    <div class="form-msg-erro" id="msg-confirmar-senha"></div>

    <br>
    <input type="submit" value="Registrar" class="form-campo-registrar">
</form>
2
  • Se você faz esse tipo de validação em diversas páginas da sua aplicação, vale a pena estudar o uso de bibliotecas de validação, como o Yup, afim de evitar a repetição de código. Commented 15/09/2019 às 23:25
  • Para o nome do usuário, poderia ser apenas if (! usuario.match(/^[A-Za-z]{2,16}$/)) { usuario inválido } (já verifica se tem entre 2 e 16 letras, e entra no if se não for válido)
    – hkotsubo
    Commented 16/09/2019 às 18:11

2 Respostas 2

2

A validação de formulário é uma validação que ocorre no navegador antes dos dados serem enviados ao servidor.

você insere dados e o aplicativo verifica se os dados estão corretos. Se as informações estiverem corretas, o aplicativo permite que os dados sejam enviados ao servidor.

A validação do formulário pode ser implementada de várias maneiras diferentes e é subdividida nas seguintes categorias:

  • Avalidação de formulário interna usa os recursos de validação de formulário HTML5.

  • A validação do JavaScript é codificada usando JavaScript. Essa validação é completamente personalizável.

Validação HTML

O recurso mais simples de validação HTML5 é o atributo required. Para tornar uma entrada obrigatória, marque o elemento com este atributo. Quando esse atributo é definido, o formulário não será enviado e exibirá uma mensagem de erro quando a entrada estiver vazia. A entrada também será considerada inválida.

Outro recurso de validação muito comum é o atributo pattern, que espera uma Expressão Regular como seu valor. Uma expressão regular (regex) é um padrão que pode ser usado para combinar combinações de caracteres em cadeias de texto, portanto, as regexs são ideais para validação de formulário e servem a uma variedade de outros usos em JavaScript.

Validação em JavaScript

Você deve usar JavaScript se quiser controlar a aparência das mensagens de erro nativas ou lidar com navegadores que não suportam a validação de formulário interna do HTML.

Aplica-se aos seguintes elementos:

Propriedades da API de validação

  • validationMessage : Uma mensagem localizada descrevendo as restrições de validação que o controle não atende (se houver) ou uma string vazia se o controle não for candidato à validação (willValidate é falso).

  • validity : Um objeto ValidityState que descreve o estado de validade do elemento.

  • willValidate : Retorna true se o elemento for validado quando o formulário for enviado ou false caso contrário.

Métodos da API de validação

  • checkValidity() Retorna true se o valor do elemento não tiver problemas de validação, false caso contrário.

  • HTMLFormElement.reportValidity() Retornará true se o elemento ou seus controles filho satisfizerem as restrições de validação. Quando false é retornado, os eventos de validação são disparados para cada elemento inválido e os problemas de validação são relatados ao usuário.

  • setCustomValidity() Adiciona uma mensagem de erro personalizada ao elemento.


Para forçar o preenchimento dos elementos do seu formulário eu apliquei o atributo required.

Para que o usuário entre com um nome válido apliquei o atributo pattern com a expressão regular ^[A-Za-z][A-Z a-z]*$.

Para que o usuário entre com um email válido apliquei o atributo pattern com a expressão regular [a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$;

function validar(){
    var usuario = document.getElementById("usuario").value;
    var email = document.getElementById("email").value;
    var senha = document.getElementById("senha").value;
    var confirmarsenha = document.getElementById("confirmar-senha").value;
    
    var valido = true;

    if(usuario.length < 2 || usuario.length > 16) {
        document.getElementById("msg-usuario").innerHTML="* O nome de usúario precisa ter entre 2 a 16 caracteres";
        valido = false;
    }else{
        document.getElementById("msg-usuario").innerHTML="";
    }

    if(email=="") {
        document.getElementById("msg-email").innerHTML="* O email é obrigatório";
        valido = false;
    }else{
        document.getElementById("msg-email").innerHTML="";
    }

    if(senha.length < 5 || senha.length > 16) {
        document.getElementById("msg-senha").innerHTML="* A senha precisa conter de 5 a 16 caracteres";
        valido = false;
    }else{
        document.getElementById("msg-senha").innerHTML="";
    }

    if(confirmarsenha=="") {
        document.getElementById("msg-confirmar-senha").innerHTML="* Confirme a senha";
        valido = false;
    }else{
        document.getElementById("msg-confirmar-senha").innerHTML="";
    }

    return valido;
}
<form class="form-registrar" onsubmit="return validar()">
    <input type="text" placeholder="Nome de usúario" class="form-campo" required id="usuario" pattern="^[A-Za-z][A-Z a-z]*$"> 
    <div class="form-msg-erro" id="msg-usuario"></div>

    <br>
    <input type="email" placeholder="Email" class="form-campo" id="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" > 
    <div class="form-msg-erro" id="msg-email"></div>

    <br>
    <input type="password" placeholder="Senha"  class="form-campo" id="senha"> 
    <div class="form-msg-erro" id="msg-senha"></div>

    <br>
    <input type="password" placeholder="Confirmar senha" class="form-campo" id="confirmar-senha"> 
    <div class="form-msg-erro" id="msg-confirmar-senha"></div>

    <br>
    <input type="submit" value="Registrar" class="form-campo-registrar">
</form>

3
  • 1
    Sobre o uso de regex para validar emails, é bom lembrar que é bem difícil validar 100% dos casos. A sua regex, por exemplo, considera que .%[email protected] é um email válido (veja). Eu falo mais sobre isso aqui, aqui, aqui e aqui (este último link tem outras opções no final, só não recomendo a última regex). De qualquer forma, +1 :-)
    – hkotsubo
    Commented 16/09/2019 às 12:43
  • 1
    @hkotsubo, Agora que eu li com calma e avaliei link por link cheguei a conclusão que eu não sei nada sobre Regex e tenho atualização muitos sistemas. Obrigado por ter conferido minha resposta. Commented 17/09/2019 às 18:27
  • 1
    Quanto mais eu estudo regex, mais eu percebo que tb não sei nada, parece um assunto sem fim... Mas acho que no fim o melhor jeito pra verificar se um email existe é mandar uma mensagem com um link de confirmação, como muitos serviços fazem. Cabe a nós avaliar em cada caso se vale a pena ter uma regex mais complexa, ou se uma mais simples já resolve (assumindo que haverá outra validação no backend, por exemplo)
    – hkotsubo
    Commented 17/09/2019 às 18:37
0

Substitua sua expressão regular /^[A-Za-z]+$/ pela expressão /[0-9]/

O que você quer é, caso o usuário insira algum número, exibir uma mensagem de erro informando que naquele campo só pode ser inserido números. Então para isso precisamos verificar se existe algum número nos caracteres digitados pelo usuário. Resumindo, você deve procurar números.

Na expressão que você utilizou, usando o método match(), você está dizendo que quer que o algoritmo procure por letras, quando na verdade o que você quer encontrar são números.

Eu estou dizendo na expressão regular que eu usei que estou procurando por um numero de 0 a 9 em qualquer parte da string. Se ele encontrar, a sua condição

else if (usuario.match(usuario_correto))

será verdadeira e a mensagem de erro será exibida como você determinou.

No caso do campo e-mail, o próprio HTML já traz um recurso para validação de e-mail. Basta que no HTML vc indique que o input seja do tipo email ao invés de texto. Isso significa que você deve substituir o trecho de código

<input type="text" placeholder="Email" class="form-campo" id="email"> 

pelo trecho de código

<input type="email" placeholder="Email" class="form-campo" id="email"> 

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 .