Como configurar a validação básica do formulário jQuery em dois minutos
Este tutorial mostra-lhe como configurar uma validação básica do formulário com jQuery, demonstrada por um formulário de registo.
Vamos utilizar o Plugin de Validação jQuery para validar o nosso formulário. O princípio básico deste Plugin é especificar regras de validação e mensagens de erro para elementos HTML em JavaScript.
Aqui está uma demonstração ao vivo do que vamos construir:
Ver a Caneta
jQuery Form Validation by SitePoint (@SitePoint)
on CodePen.
Step 1: Incluir jQuery
Primeiro, precisamos de incluir a biblioteca jQuery. O plugin de validação jQuery foi testado até à versão jQuery 3.1.1, mas a demonstração neste artigo funciona perfeitamente com a versão 3.4.1, que é a mais recente.
P>Pode usar qualquer uma das seguintes opções de download:
- Download it from jquery.com
- Download it using Bower:
$ bower install jquery - Download it using npm or Yarn:
$ npm install jqueryouyarn add jquery - Utilizar um CDN:
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js
cria um novo ficheiro HTML com o nome index.html e inclui jQuery antes do fecho </body> tag:
<!-- Change the "src" attribute according to your installation path --><script src="vendor/jquery/dist/jquery.min.js"></script>Se quiser usar Bower ou npm mas não estiver familiarizado com eles, poderá estar interessado nestes dois artigos:
- Gestão de Pacotes para o Navegador com Bower
- Um Guia do Iniciante para npm – o Gestor de Pacotes de Nodos
Passo 2: Incluir o Plugin de Validação jQuery
Escolha entre:
- Download it from the plugin’s github repo
- Download it using Bower:
$ bower install jquery-validation - Download it using npm:
npm i jquery-validation - NuGet:
Install-Package jQuery.Validation
Utilizar um CDN: https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js
Inclua o plugin depois de jQuery:
<!-- Change the "src" attribute according to your installation path --><script src="vendor/jquery-validation/dist/jquery.validate.min.js"></script>Passo 3: Criar o formulário HTML
Para o registo, queremos recolher as seguintes informações do utilizador:
- primeiro nome
- último nome
- palavras-passe
Então, vamos criar o nosso formulário contendo estes campos de entrada:
<div class="container"> <h2>Registration</h2> <form action="" name="registration"> <label for="firstname">First Name</label> <input type="text" name="firstname" placeholder="John"/> <label for="lastname">Last Name</label> <input type="text" name="lastname" placeholder="Doe"/> <label for="email">Email</label> <input type="email" name="email" placeholder="[email protected]"/> <label for="password">Password</label> <input type="password" name="password" placeholder="●●●●●"/> <button type="submit">Register</button> </form></div> Ao integrar isto numa aplicação real, não se esqueça de preencher o atributo action, para garantir que o formulário é submetido ao destino correcto.
Passo 4: Criar Estilos para o Formulário
Criar um novo ficheiro, css/styles.css, e incluí-lo na secção <head> do seu ficheiro HTML:
<link rel="stylesheet" href="css/style.css"/>Copiar os seguintes estilos no ficheiro recentemente criado:
@import url("https://fonts.googleapis.com/css?family=Open+Sans");/* Styles */* { 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;}Note os estilos para .error, que serão utilizados para mensagens de erro de validação.
Passo 5: Criar as Regras de Validação
Finalmente, precisamos de inicializar o plugin de validação do formulário. Criar um novo ficheiro js/form-validation.js e referenciá-lo após o <script> tag do plugin de Validação jQuery:
<script src="js/form-validation.js"></script>Copie o seguinte código no ficheiro recém-criado:
// Wait for the DOM to be ready$(function() { // Initialize form validation on the registration form. // It has the name attribute "registration" $("form").validate({ // Specify validation rules rules: { // The key name on the left side is the name attribute // of an input field. Validation rules are defined // on the right side firstname: "required", lastname: "required", email: { required: true, // Specify that email should be validated // by the built-in "email" rule email: true }, password: { required: true, minlength: 5 } }, // Specify validation error messages 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" }, // Make sure the form is submitted to the destination defined // in the "action" attribute of the form when valid submitHandler: function(form) { form.submit(); } });});Conclusion
É isso, está feito! Agora tem uma ideia de como configurar a validação do formulário com jQuery. Por favor tenha em mente que isto não substitui a validação do lado do servidor. Ainda é possível para um utilizador malicioso manipular ou contornar as regras de validação (por exemplo, utilizando as ferramentas de desenvolvimento do browser).