No nosso tutorial anterior, discutimos como implementar a validação básica de formulários usando alguns atributos de entrada em HTML5 e um pouco de regex.
Neste tutorial, aprenderá como usar um plugin jQuery para adicionar validação de formulário ao seu sítio web.
Utilizar um plugin jQuery para validar formulários serve muitos propósitos. Dá-lhe capacidades adicionais, como exibir facilmente mensagens de erro personalizadas e adicionar lógica condicional à validação de formulários. Uma biblioteca de validação pode também ajudá-lo a adicionar validação aos seus formulários HTML com o mínimo ou nenhumas alterações à marcação. As condições de validade também podem ser adicionadas, removidas ou modificadas a qualquer momento com facilidade.
Arrancar
Usaremos o Plugin de Validação jQuery neste tutorial. O plugin oferece muitas funcionalidades e também ajuda a definir a sua própria lógica de validação.
Antes de podermos começar a utilizar o plugin nos nossos campos, temos de incluir os ficheiros necessários no nosso projecto. Há dois ficheiros diferentes a incluir. O primeiro é o ficheiro principal, que inclui as características principais do plugin, incluindo tudo, desde diferentes métodos de validação até alguns selectores personalizados. O segundo ficheiro contém métodos adicionais para validar entradas como números de cartão de crédito e números de telefone baseados nos EUA.
P>Pode adicionar estes ficheiros aos seus projectos através de gestores de pacotes como Bower ou NPM. Pode também obter directamente uma ligação CDN para os ficheiros e adicioná-los a uma tag script na sua página web. Uma vez que se trata de um plugin baseado em jQuery, terá também de adicionar uma ligação à biblioteca jQuery.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
Após ter adicionado estes ficheiros, pode começar a validar qualquer formulário com o método validate.
Validar o seu primeiro formulário
P>Pode começar a utilizar este plugin sem fazer quaisquer alterações significativas à sua marcação. A única coisa que poderá ter de alterar é adicionar um id ou class ao formulário que deseja validar, se ainda não o tiver.
Aqui está a marcação de um formulário básico que iremos validar utilizando o plugin jQuery validate.
<form action="" method="post"><p><label for="name">Name <span>(required, at least 3 characters)</span></label><input name="name" minlength="3" type="text" required></p><p><label for="email">E-Mail <span>(required)</span></label><input type="email" name="email" required></p><p><input class="submit" type="submit" value="SUBMIT"></p></form>
Estamos a utilizar os mesmos atributos que utilizámos no nosso anterior tutorial de validação de formulários baseado em HTML5. O formulário continuará a fazer a validação sem que tenhamos adicionado qualquer JavaScript. No entanto, a utilização do plugin para validação permitir-nos-á mostrar as mensagens de erro logo abaixo do campo de entrada inválido. Poderemos também estilizar os erros como quisermos.
Para começar a validar o formulário com este plugin, basta adicionar o seguinte código JavaScript na página web:
$(document).ready(function() {$("#basic-form").validate();});
Isto é baseado no pressuposto de que já adicionou os ficheiros JavaScript necessários. A adição dessas linhas de JavaScript irá garantir que o seu formulário está devidamente validado e mostra todas as mensagens de erro. Aqui está uma demonstração de trabalho.
A biblioteca tenta ser tão amigável quanto possível, mostrando apenas mensagens de erro quando estas são necessárias. Por exemplo, se se tabular através dos campos de nome e e-mail sem realmente introduzir qualquer informação, não receberá quaisquer mensagens de erro. Contudo, se tentar passar para o campo de correio electrónico depois de introduzir apenas um carácter no campo do nome, receberá uma mensagem de erro sobre a introdução de pelo menos três caracteres.
As mensagens de erro são injectadas no DOM usando o elemento label. Todas elas têm uma classe error, por isso é fácil aplicar o seu próprio estilo, como fizemos no nosso exemplo. O mesmo é verdade para entradas inválidas, que também recebem um error classe adicionada a elas.
Opções para validar() Método
No nosso exemplo anterior, simplesmente chamámos o método validate() sem lhe passar quaisquer opções. Contudo, também podemos passar um objecto a este método juntamente com muitas opções dentro desse objecto. O valor destas opções determinará como o plugin do formulário trata a validação, erros, etc.
Se quiser que este plugin ignore alguns elementos durante o processo de validação, pode fazê-lo facilmente passando uma classe ou selector para ignore(). O plugin ignorará todos os elementos do formulário com esse selector específico quando validar a entrada.
Add Validation Rules for Input Fields
P>Pode também passar algumas regras ao método validate() a fim de determinar como os valores de entrada são validados. O valor do parâmetro rules deve ser um objecto com pares de valores chave. A chave em cada caso é o nome do elemento que queremos validar. O valor dessa chave é um objecto que contém um conjunto de regras que serão utilizadas para validação.
Também pode adicionar lógica condicional aos diferentes campos que está a validar, utilizando a palavra-chave depends e passando-lhe uma função de retorno que retorna ou true ou false. Aqui está um exemplo que utiliza regras simples para definir como a entrada é validada.
$(document).ready(function() {$("#basic-form").validate({rules: {name : {required: true,minlength: 3},age: {required: true,number: true,min: 18},email: {required: true,email: true},weight: {required: {depends: function(elem) {return $("#age").val() > 50}},number: true,min: 0}}});});
No código acima, as chaves nameageemail e weight são simplesmente os nomes dos elementos de entrada. Cada chave tem um objecto como valor, e os pares de valores chave no objecto determinam como um campo de entrada será validado.
Estas opções de validação são semelhantes aos atributos que se podem acrescentar na marcação de um formulário. Por exemplo, a definição required para true fará com que o elemento necessário para a submissão de um formulário seja o elemento requerido. A configuração minlength a um valor como 3 forçará os utilizadores a introduzir pelo menos 3 caracteres na entrada de texto. Há alguns outros métodos de validação incorporados que são brevemente descritos na página de documentação.
Uma coisa que deve ter em conta no código acima é o uso de depends para condicionalmente tornar o peso num campo requerido se a idade for superior a 50 anos. Isto é feito retornando true na função callback se o valor introduzido no age campo de entrada for superior a 50.
Criar as suas próprias mensagens de erro
Este plugin também lhe permite definir mensagens de erro para diferentes regras de validação num formulário. Comece por definir o valor do messages chave para um objecto com pares de valores chave para os campos de entrada e as mensagens de erro correspondentes.
Aqui está um exemplo que exibirá mensagens de erro personalizadas para cada campo de entrada.
messages : {name: {minlength: "Name should be at least 3 characters"},age: {required: "Please enter your age",number: "Please enter your age as a numerical value",min: "You must be at least 18 years old"},email: {email: "The email should be in the format: [email protected]"},weight: {required: "People with age over 50 have to enter their weight",number: "Please enter your weight as a numerical value"}}
Apenas como regras, messages confiar no nome dos campos de entrada. Cada um destes campos de entrada aceitará um objecto com pares de valores chave como o seu valor. A chave em cada caso é a regra de validação que tem de ser seguida. O valor é simplesmente a mensagem de erro que deseja exibir se uma determinada regra for violada.
Por exemplo, o age campo de entrada activará a mensagem de erro required se deixado em branco. Contudo, activará o number erro se introduzir qualquer outra coisa para além de um número no campo de entrada.
Uma coisa que notará é que o plugin mostrará uma mensagem de erro genérica para regras de validação onde não tenha fornecido uma mensagem de erro personalizada. Tente preencher diferentes valores na seguinte demonstração e verá que as mensagens de erro personalizadas e genéricas aparecem como esperado.
Customizing the Appearance of Error Messages
Há alturas em que poderá querer adicionar as suas próprias classes para entradas válidas e inválidas, de modo a direccioná-las mais especificamente ou para uma melhor integração com um tema existente.
P>Pode alterar as classes que são adicionadas aos elementos de entrada válidos ou inválidos usando as teclas errorClass e validClass. Isto pode ajudar a evitar alguns choques indesejados devido à reutilização do mesmo nome de classe. Por defeito, a classe error é atribuída a cada elemento de entrada e etiqueta inválida. O valid class é atribuído a cada elemento de entrada válido.
É importante lembrar que a configuração errorClass a algo como fail-alert irá remover o error class dos elementos inválidos. Terá de usar errorClass: "error fail-alert" para atribuir múltiplas classes ao mesmo elemento. O mesmo vale para validClass.
Não há etiquetas adicionais adicionadas ao formulário quando os utilizadores introduzem uma entrada válida. Assim, as classes de validClass são atribuídas ao elemento de entrada válido.
O seguinte trecho de código baseia-se no exemplo anterior para adicionar classes CSS personalizadas e estilo a elementos inválidos e válidos.
O único código JavaScript adicional é utilizado para atribuir as classes.
$(document).ready(function() {$("#basic-form").validate({errorClass: "error fail-alert",validClass: "valid success-alert",// ... More validation code from previous example
Aqui está o CSS que utilizaremos para alterar a aparência das mensagens de erro:
label.error.fail-alert {border: 2px solid red;border-radius: 4px;line-height: 1;padding: 2px 0 6px 6px;background: #ffe6eb;}input.valid.success-alert {border: 2px solid #4CAF50;color: green;}
Além de personalizar as mensagens de erro, estamos também a adicionar o nosso próprio estilo aos elementos de entrada válidos. Aqui está uma demonstração da CodePen para nos mostrar o resultado final.
Mais opções para alterar o comportamento do plugin
P>Pode evitar que o plugin valide os campos de entrada na tecla para cima, clique, e outros eventos deste tipo definindo o valor de onfocusoutonkeyup, ou a false. Tenha em mente que boolean true não é um valor válido para estas chaves. Isto significa basicamente que se quiser que o plugin valide ou perca o foco num evento de chave para cima, basta deixar estas opções intactas.
Tem também a opção de alterar o elemento em que o erro aparece. Por defeito, o plugin usa o elemento label para mostrar todas as mensagens de erro, mas pode alterá-lo para em ou qualquer outro elemento usando a tecla errorElement. O próprio elemento de erro pode então ser envolvido noutro elemento HTML usando a tecla wrapper key.
Estas são algumas das opções mais comuns que é provável utilizar ao validar formulários. Contudo, existem algumas outras opções de validação que podem ser úteis se quiser fazer algo como alterar a colocação de mensagens de erro ou agrupá-las todas.
Final Thoughts
Neste tutorial, aprendemos como levar a nossa validação de formulários para o próximo nível utilizando um plugin jQuery. A utilização da validação de formulários em JavaScript dá-nos muito controlo adicional sobre a validação HTML básica. Por exemplo, pode facilmente controlar como e quando diferentes mensagens de erro aparecem quando uma entrada é preenchida com valores inválidos. Da mesma forma, pode também especificar se o plugin deve saltar a validação para alguns elementos em particular. Recomendo vivamente que leia a documentação deste plugin e algumas melhores práticas sobre como utilizá-lo correctamente.
No nosso próximo tutorial, aprenderá mais algumas ferramentas e plugins baseados em JavaScript para o ajudar a criar e validar facilmente formulários.
E enquanto estiver aqui, veja alguns dos nossos outros posts sobre formulários JavaScript e validação de formulários!
-
HTML5Validação de entrada de formulário usando apenas HTML5 e RegexMonty Shokeen
-
div>Desenvolvimento Web
Submeter um Formulário sem Actualização de Página Usando jQueryEric -
PHPCriar um Formulário de Contacto em PHPMonty Shokeen -
PHPComparando os 5 Melhores Construtores de Formulários PHP (E 4 Scripts Grátis)Monty Shokeen -
div>JavaScript
Best JavaScript Forms of 2019Monty Shokeen
br>>>/p>