Tutorial de validação de formulário jQuery: exemplo simples com plug-in de validação jQuery

Este tutorial mostra como configurar um exemplo simples de validação de formulário usando um formulário de registro.

Usaremos o Plug-in de validação jQuery para validar um formulário HTML. A funcionalidade básica deste plugin é especificar lógica de validação e mensagens de erro para elementos HTML em código JavaScript.

Aqui está uma demonstração ao vivo da validação do formulário HTML usando jQuery que iremos construir:

Veja a caneta
Validação de formulário jQuery por SitePoint (@SitePoint) sobre CodePen.

Principais vantagens:

• Primeiro, inclua a biblioteca jQuery em seu trecho de código HTML para configurar a validação básica de entrada de formulário com o plugin jQuery. Você pode baixá-lo do site oficial, usar um gerenciador de pacotes como Bower ou npm ou usar um CDN.
• Depois de incluir o jQuery, inclua o plug-in de validação de dados do jQuery. Este plugin permite especificar lógica de validação e mensagens de erro para elementos HTML em código JavaScript. Por exemplo, você pode criar um formulário básico com campos de entrada para informações do usuário e usar o plugin para validar essas informações.
• Para estilizar o formulário, crie um novo arquivo CSS e inclua-o na seção head do seu código HTML. Em seguida, inicialize a validação do jQuery no envio do formulário em um novo arquivo JavaScript (JS), especificando as regras de validação e mensagens de erro de cada campo de entrada.
• Lembre-se de que a validação do lado do cliente não substitui a validação do lado do servidor, pois um usuário mal-intencionado ainda pode manipular ou ignorar as regras de validação.
• Explore técnicas avançadas, como métodos de validação personalizados, validação em tempo real e validação remota para verificações no servidor.
• Siga as práticas recomendadas de segurança combinando a validação do lado do cliente e do lado do servidor para proteger contra entradas maliciosas.

Compreendendo as abordagens de validação de formulário

Antes de mergulhar na implementação, vamos comparar as abordagens manuais e de plug-in de validação de dados jQuery para entender por que o plug-in de validação se destaca:

No geral, a abordagem do plugin jQuery oferece várias vantagens:

• Métodos de validação integrados.
• Tratamento automático de erros.
• Comportamento consistente em todos os formulários.
• Personalização fácil.
• Melhor organização do código.
• Recursos de acessibilidade integrados.

Como agora você tem um entendimento básico do que é JQuery, vamos seguir as etapas de construção de um exemplo simples de validação de formulário jQuery. As etapas abaixo lhe darão uma compreensão clara de como validar um formulário antes do envio.

Etapa 1: incluir jQuery

Primeiro, precisamos incluir a biblioteca jQuery. No momento em que este artigo foi escrito, usamos a versão mais recente, jQuery 3.7.1.

Você pode usar qualquer um dos seguintes opções de download:

• Baixe em jquery. com.
• Baixe-o usando Caramanchão: $bower instala jquery.
• Baixe-o usando npm ou fio: $ npm install jquery ou yarn add jquery.
• Use o mais recente compatível Versão CDN.

Crie um novo arquivo HTML chamado index.html e inclua jQuery antes do fechamento

marcação:

<script src="vendor/jquery/dist/jquery.min.js">script>

Se você gostaria de usar Bower ou npm, mas não está familiarizado com eles, você pode estar interessado nestes dois artigos:

Etapa 2: incluir o plug-in de validação jQuery

O plugin de validação estende os recursos do jQuery com métodos de validação integrados.

Escolha entre:

• Baixe em o repositório GitHub do plugin.
• Baixe-o usando o Bower: $ bower install jquery-validation.
• Baixe-o usando npm: npm i jquery-validation.
• NuGet: Pacote de instalação jQuery.Validation.
• Use o mais recente compatível Versão CDN.

Inclua o plugin após jQuery:

<script src="vendor/jquery-validation/dist/jquery.validate.min.js">script>

Etapa 3: crie o arquivo HTML

No formulário de registro, usaremos as seguintes informações do usuário:

1. Primeiro nome
2. Sobrenome
3. E-mail
4. Senha

Então, vamos criar nosso formulário básico contendo estes campos de entrada:

<div class="container">
  <h2>Registrationh2>
  <form action="" name="registration">

    <label for="firstname">First Namelabel>
    <input type="text" name="firstname" id="firstname" placeholder="John"/>

    <label for="lastname">Last Namelabel>
    <input type="text" name="lastname" id="lastname" placeholder="Doe"/>

    <label for="email">Emaillabel>
    <input type="email" name="email" id="email" placeholder="john@doe.com"/>

    <label for="password">Passwordlabel>
    <input type="password" name="password" id="password" placeholder="●●●●●"/>

    <button type="submit">Registerbutton>

  form>
div>

Ao integrar isso em um aplicativo real, não se esqueça de preencher o atributo action no código acima para garantir que o formulário seja enviado ao destino correto.

Etapa 4: crie estilos para o formulário

Crie um novo arquivo, css/styles.css, e inclua-o no

seção do seu snippet de código HTML:

<link rel="stylesheet" href="css/style.css"/>

Copie os seguintes estilos no arquivo recém-criado:

@import url("https://fonts.googleapis.com/css?family=Open+Sans");


* {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Open Sans";
  font-size: 14px;
}

.container {
  width: 500px;
  margin: 25px auto;
}

form {
  padding: 20px;
  background: #2c3e50;
  color: #fff;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}

form label,
form input,
form button {
  border: 0;
  margin-bottom: 3px;
  display: block;
  width: 100%;
}

form input {
  height: 25px;
  line-height: 25px;
  background: #fff;
  color: #000;
  padding: 0 6px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

form button {
  height: 30px;
  line-height: 30px;
  background: #e67e22;
  color: #fff;
  margin-top: 10px;
  cursor: pointer;
}


form .error {
  color: #ff0000;
}

O formulário ficará semelhante ao abaixo após esta etapa:

Observação: Os estilos para .error exibirão todas as mensagens de erro.

Etapa 5: Crie a lógica de validação

Finalmente, precisamos inicializar o plugin de validação. Crie um novo arquivo js/form-validation.js e referencie-o após o

<script src="js/form-validation.js">script>

Copie o seguinte código no arquivo recém-criado:

$(function() {
  
  
  $("form(name="registration")").validate({
    
    rules: {
      
      
      
      firstname: "required",
      lastname: "required",
      email: {
        required: true,
        
        
        email: true
      },
      password: {
        required: true,
        minlength: 5
      }
    },
    
    messages: {
      firstname: "Please enter your firstname",
      lastname: "Please enter your lastname",
      password: {
        required: "Please provide a password",
        minlength: "Your password must be at least 5 characters long"
      },
      email: "Please enter a valid email address"
    },
    
    
    submitHandler: function (form) {
     form.submit();
    
  });
});

O código acima realizará a validação do jQuery no envio do formulário.

Técnicas Avançadas de Validação

1. Métodos de validação personalizados

• Os métodos de validação personalizados permitem criar regras para cenários que não são cobertos pelas opções de validação integradas.
• O plug-in fornece o $.validator.addMethod função para criar tais regras.
• O código abaixo mostra um exemplo de validação jQuery para caracteres alfanuméricos (3-20 caracteres)

$.validator.addMethod("username", function(value, element) {
  return this.optional(element) || /^(a-zA-Z0-9){3,20}$/.test(value);
}, "Username must be 3-20 alphanumeric characters.");

$("form(name="registration")").validate({
  rules: {
    username: {
      required: true,
      username: true
    }
  }
});

2. Validação em tempo real

• Use ouvintes de eventos como onkeyup, onfocusout e onclick para acionar validações.
• Valide apenas campos visíveis para melhorar a capacidade de resposta.
• Use validação debounce para otimização de desempenho.

$("form(name="registration")").validate({
  onkeyup: function(element) {
    var validator = this;
    setTimeout(function() {
      validator.element(element);
    }, 300); 
  }
});

3. Validação Assíncrona (Remota)

• Use o método remoto para validar a entrada em um endpoint do lado do servidor para cenários como verificação de nome de usuário ou disponibilidade de email.
• Mostrar indicadores de carregamento durante a validação.
• Exemplo: verificação de disponibilidade de nome de usuário

rules: {
  username: {
    required: true,
    remote: {
      url: "/check-username",
      type: "post",
      data: {
        username: function() {
          return $("#username").val();
        }
      }
    }
  }
},
messages: {
  username: {
    remote: "Username is already taken."
  }
}

4. Validação Condicional

• Defina regras dinamicamente com base no estado do formulário, como exigir um endereço de entrega somente se uma caixa de seleção estiver marcada.
• Exemplo: Valida o campo de endereço somente quando a caixa de seleção de envio está marcada.

rules: {
  address: {
    required: function(element) {
      return $("#shipping").is(":checked");
    }
  }
}

5. Melhorando a experiência do usuário

• Mensagens de erro: personalize mensagens de erro e posicionamento para uma interface de usuário melhor.

errorPlacement: function(error, element) {
  error.appendTo(element.parent().find(".error-container"));
}

• Internacionalização: suporte a vários idiomas usando mensagens de erro localizadas. Você pode integrar arquivos de idiomas predefinidos do plugin de validação ou criar arquivos de localização personalizados.

function loadLanguage(lang) {
  $.getScript("js/localization/messages_" + lang + ".js", function() {
    $("form(name="registration")").validate();
  });
}


loadLanguage('fr');

6. Melhores práticas de segurança

• Limpe a entrada antes da validação para remover caracteres perigosos.
• Combine a validação do lado do cliente e do lado do servidor para garantir uma segurança robusta.

7. Armadilhas e soluções comuns

• Lide com campos adicionados dinamicamente anexando regras de validação dinamicamente usando seletores jQuery.

$("#add-field").click(function() {
  $("#new-field").rules("add", {
    required: true,
    email: true
  });
});

• Evite vários envios com um mecanismo de bloqueio de envio.

submitHandler: function(form) {
  $("#submit-button").prop("disabled", true);
  form.submit();
}

8. Melhorias de acessibilidade

• Use atributos ARIA (ária-inválida, ária-descrita por) para leitores de tela.
• Certifique-se de que todos os erros sejam devidamente anunciados e navegáveis.

Conclusão

É isso, pronto! Agora você sabe como configurar a validação de dados de formulário com jQuery, completa com uma mensagem de validação personalizada. Lembre-se de que isso não substitui a validação do lado do servidor. Ainda é possível que um usuário mal-intencionado manipule ou ignore as restrições de validação (por exemplo, usando as ferramentas de desenvolvedor do navegador).

Perguntas frequentes (FAQ)

O que é validação de dados de formulário jQuery?

Ele garante que a entrada do usuário em formulários HTML atenda a critérios específicos antes de ser enviada a um servidor, ajudando a evitar o processamento de dados incorretos ou incompletos.

Por que a validação dos dados do formulário é importante?

A validação garante a precisão dos dados, evita erros e melhora a experiência do usuário. A validação da entrada do usuário ajuda a manter a integridade dos dados e reduz a probabilidade de problemas decorrentes de dados incorretos ou maliciosos.

Como executo a validação de dados de formulário usando jQuery?

O plugin pode ser usado para validar dados ou escrever código jQuery personalizado. Ele simplifica o processo, fornecendo lógica de validação pré-construída e mensagens de erro.

Quais são algumas restrições de validação de dados de formulário padrão?

Os padrões de validação incluem a verificação de campos obrigatórios, endereços de email válidos (validação de email), valores numéricos e complexidade de senha. O plugin de validação de dados jQuery oferece regras integradas para esses cenários.

Posso criar restrições de validação personalizadas?

Sim, você pode criar restrições de validação personalizadas usando o plugin de validação de dados jQuery. Defina um novo método de validação e especifique seu comportamento, como verificar um padrão ou valor específico.

Como inicio a validação de dados de formulário usando o plug-in de validação de dados jQuery?

Normalmente você chama o método .validate() em seu elemento de formulário para iniciar a validação. O plugin de validação de dados jQuery fornece esse método e configura as regras e comportamentos para validação.

O que acontece se um formulário não passar na validação?

Se um formulário não passar na validação, o plugin de validação de dados jQuery impedirá que ele seja enviado e exibirá mensagens de erro próximas aos campos de entrada correspondentes. Isso dará feedback aos usuários sobre o que precisa ser corrigido.

Como posso personalizar mensagens de erro na validação de dados do formulário jQuery?

O plugin permite personalizar mensagens de erro para regras de validação específicas. Você pode definir mensagens de erro personalizadas nas configurações de validação de cada campo de entrada.

Posso usar a validação de dados do formulário jQuery sem o plug-in de validação?

Sim, você pode realizar a validação de dados de formulário usando código jQuery personalizado sem depender do plugin Validation. Você precisa escrever funções JavaScript que verifiquem manualmente as entradas do formulário e exibam mensagens de erro.

Existem alternativas para o plug-in de validação de consulta?

Sim, outras bibliotecas e estruturas de validação de formulários estão disponíveis, como Parsley.js e Formik (para aplicativos React). Além disso, o HTML5 introduziu atributos e restrições de validação de formulário integrados.

Posso usar AJAX para validar dados de formulário?

Sim, você pode usar AJAX com validação de formulário para realizar validação em tempo real ou enviar dados de formulário de forma assíncrona. Isso pode ajudar a melhorar a experiência do usuário, reduzindo recarregamentos de páginas.

A validação de dados de formulário é apenas para validação do lado do cliente?

A validação do formulário pode ser realizada tanto no lado do cliente quanto no servidor. A validação do lado do cliente melhora a experiência do usuário, enquanto a validação do lado do servidor é essencial para evitar que dados maliciosos ou incorretos cheguem ao servidor.

Como posso lidar com o envio do formulário após a validação?

Se você estiver usando o plugin, ele tratará o envio automaticamente se a validação for aprovada. Se estiver usando a validação personalizada, você poderá enviar o formulário manualmente se a validação for bem-sucedida.

Posso usar a validação de dados de formulário jQuery com outras estruturas JavaScript?

Sim, você pode usar a validação de formulário jQuery junto com outras estruturas JavaScript. Tenha cuidado com possíveis conflitos ou problemas de compatibilidade e certifique-se de integrar a lógica de validação de forma adequada.

Como implementar a validação em tempo real com eficiência?

Para melhorar o desempenho, a validação em tempo real pode ser implementada com debouncing. O método “onkeyup” é usado para eliminar a validação de entrada.

Posso validar dados de forma assíncrona, como verificar a disponibilidade do nome de usuário?

Sim, a validação de dados jQuery suporta validação assíncrona para casos como verificar se um nome de usuário já foi usado. Isso é feito fazendo uma chamada de API em segundo plano e exibindo feedback apropriado com base na resposta do servidor.

validação de formuláriogitCSjQuerynilsonj