Skip to main content
3 de 3
Commonmark migration

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>

Augusto Vasques
  • 18,8mil
  • 10
  • 31
  • 62