Validação com jQuery: Como usar o plugin Validation

Uma etapa fundamental no desenvolvimento de uma aplica��o web � a valida��o de formul�rios, pois � nesta fase onde definimos quais restri��es ou valida��es o formul�rio deve atender, assim garantindo que os usu�rios forne�am apenas dados v�lidos. Diante disso, existem dois tipos populares de valida��o de formul�rios, o chamado client-site (valida��es que ocorrem no lado do cliente) e o server-side (valida��es que ocorrem no lado do servidor). Contudo, este artigo tem como foco apenas no client-side, onde utilizaremos o Framework jQuery Validation.

Conhecendo o Plugin jQuery Validation

Desenvolvido em 2006 por J�rn Zaefferer (membro fundador do jQuery), o Plugin Validation em sua vers�o atual 1.14.0 oferece ao desenvolvedor um conjunto de m�todos �teis de valida��o de formul�rios web como, por exemplo, campo obrigat�rio, n�mero de cart�o de cr�dito, URL, e-mail e outros. Al�m disso, fornece uma API para cria��o dos nossos pr�prios m�todos de valida��o personalizados. E para a apresenta��o das mensagens (de erro e sucesso) para o usu�rio durante a valida��o, o plugin Validation oferece mais de 37 tradu��es, inclu�do os padr�es em ingl�s e Portugu�s do Brasil.

Para come�ar com o jQuery Validation � bem simples: basta incluir os scripts (vide Listagem 1) entre as tags de um HTML que se deseja validar de um formul�rio web.


  <!-- Inclus�o do jQuery-->
  <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
  <!-- Inclus�o do Plugin jQuery Validation-->
  <script src="http://jqueryvalidation.org/files/dist/jquery.validate.js"></script>

Listagem 1. Scripts para iniciar o jQuery Validation

Observe que no script n�o inclu�mos a sua vers�o mais recente, pois ainda n�o foi testada e validada totalmente com esta vers�o do jQuery a 1.11.1. Ent�o, por quest�es de compatibilidade, optamos por utiliz�-lo. Vejamos um exemplo b�sico de como utilizar o jQuery Validation na valida��o de um formul�rio de coment�rio bem simples, onde o usu�rio poder� submeter o mesmo quando preencher todos os campos, incluindo um e-mail v�lido. Para isso, primeiramente crie um arquivo chamado �index.html� e nele acrescente o c�digo da Listagem 2.


  <!DOCTYPE html>
  <html>
  <head>
  <meta charset="UTF-8">
  <title>Validando formul�rios com JQuery Validation</title>
  <!-- Inclus�o do jQuery-->
  <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
  <!-- Inclus�o do Plugin jQuery Validation-->
  <script src="http://jqueryvalidation.org/files/dist/jquery.validate.js"></script>
  </head>
  <body>
   
  <form id="formComentario" method="post" action="">
    <fieldset>
      <legend>Por favor preencha o nome, e-mail e coment�rio</legend>
      <p>
        <label for="cnome">Nome (obrigat�rio, pelo menos 2 caracteres)</label>
        <input type="text" id="cnome" name="nome" required minlength="2">
      </p>
      <p>
        <label for="cemail">E-mail (obrigat�rio)</label> 
        <input type="email" id="cemail" name="email" required >
      </p>
      <p>
        <label for="ccomentario">Seu coment�rio (obrigat�rio)</label>
        <textarea id="ccomentario" name="comentario" required ></textarea>
      </p>
      <p>
        <input type="submit" value="Enviar">
      </p>
    </fieldset>
  </form>
  <!-- Inclus�o das valida��es com o Plugin jQuery Validation-->
  <script src="validacao.js"></script>
  </body>
  </html>

Listagem 2. C�digo da p�gina index.html

Em seguida, crie um arquivo JavaScript chamado �validacao.js� com o c�digo da Listagem 3, onde cont�m o c�digo da nossa primeira valida��o utilizando o Validation.


 //Valida��o simples
  $("#formComentario").validate();

Listagem 3. C�digo do arquivo validacao.js

Observe que com apenas um m�todo �validate()� podemos validar o nosso formul�rio. O �#formComentario� faz refer�ncia ao nosso formul�rio da Listagem 2, onde declaramos a tag o �id=formComentario�, assim, o plugin Validation tem controle sobre o nosso formul�rio. Como definimos um �nico m�todo de valida��o, o plugin entende que validar� cada campo de acordo com sua especificidade. Por exemplo: como o nosso campo de e-mail est� marcado no HTML como type=�email� e required, o Validation s� permitir� a entrada de e-mail v�lido e de preenchimento obrigat�rio. Se porventura n�o defin�ssemos o required no campo de e-mail, ent�o o Validation s� permitiria a entrada de e-mail v�lido, mas sem o preenchimento obrigat�rio.

Para visualizarmos a valida��o do nosso formul�rio basta acessar pelo navegador a p�gina index.html e depois tentar enviar o formul�rio clicando no bot�o �enviar�, assim teremos o resultado semelhante � Figura 1.

Resultado
da valida��o do formul�rio utilizando o Plugin Validation — **Figura 1**. Resultado da valida��o do formul�rio utilizando o Plugin Validation

Trabalhando com o m�todo validate() do Plugin Validation

Nesta se��o conheceremos as principais op��es de valida��o com o m�todo validate(), vejamos:

debug: nessa op��o podemos definir true para o plugin n�o permitir a submiss�o do formul�rio, mesmo que todos os dados sejam v�lidos; ou false para permitir o envio dos dados. Esta op��o � interessante quando desejamos realizar algum tipo de teste.
messages: com esta op��o podemos definir mensagens personalizadas para cada regra, definida para cada campo, assim realizando um �override� das mensagens tidas como padr�o do Plugin Validation. Contudo, vale ressaltar que o Validation fornece em seu reposit�rio mensagens em portugu�s.
rules: � nesta op��o onde definimos as regras de valida��o para cada campo do nosso formul�rio. Vejamos na Tabela 1as principais regras de valida��o:

Regra	Valida��o
email	Se definido como true, o campo s� aceitar� e-mails v�lidos;
required	Se definido como true, o campo � de preenchimento obrigat�rio;
min	Define um n�mero ou valor m�nimo v�lido. Por exemplo, se definimos como 4, o usu�rio s� poder� informar um n�mero maior igual a 4. Abaixo disso a informa��o � inv�lida;
max	Define um n�mero ou valor m�ximo v�lido. Por exemplo, se definimos como 10, o usu�rio s� poder� informar um n�mero que seja menor ou igual a 10. Acima disso a informa��o � inv�lida;
range	Determina um intervalo, contendo um valor m�nimo e m�ximo v�lido. Por exemplo, se definirmos como [10, 20], o usu�rio s� poder� informar um n�mero que seja maior ou igual a 10 e menor ou igual a 20;
minlength	Determina uma quantidade m�nima de caracteres. Por exemplo, se definirmos como 10, o usu�rio s� poder� informar um valor com no m�nimo 10 caracteres. Abaixo disso a informa��o � inv�lida;
maxlength	Define uma quantidade m�xima de caracteres. Por exemplo, se definirmos como 5, o usu�rio s� poder� informar um valor com no m�ximo 5 caracteres. Acima disso a informa��o � inv�lida;
rangelength	Define um intervalo, contendo uma quantidade m�nima e m�xima de caracteres v�lidos. Por exemplo, se definirmos como [2, 6], o usu�rio s� poder� informar um valor com nom�nimo 2 e no m�ximo 6 caracteres;
url	Se definido como true, o campo s� aceitar� URLs v�lidas;
date	Se definido como true, o campo s� aceitar� datas v�lidas;
dateISO	Caso definido como true, o input s� aceitar� datas no formato ISO;
number	Caso definido como true, o input s� aceitar� n�meros inteiros ou decimais;
digits	Caso definido como true, o input s� permitir� d�gitos;
creditcard	Se definido como true, o input s� permitir� n�mero de cart�o de cr�dito v�lido;
remote	Caso defina uma URL de verifica��o, por exemplo �verificar_se_existe_cpf.php�. Ent�o o Validation realiza uma verifica��o remota com a url e com o valor informado no campo, assim, se a resposta para a requisi��o de valida��o for false, ent�o o Validation entende que a informa��o no campo n�o � v�lida, agora caso a resposta for true ent�o a informa��o � v�lida. Por exemplo: verificar se o CFP j� existe na aplica��o;
equalTo	Verifica se o valor dois campos s�o iguais. Por exemplo: Verificar se as senhas s�o iguais, no cen�rio de inserir uma senha e repetir a senha novamente.
accept	Esta regra � utilizada para o campo �input= file� para upload de arquivo, onde podemos definir quais mime-types s�o permitidos. Por exemplo, se definimos esta regra com o valor �audio/*�, ent�o estamos dizendo ao Validation que s� � permitido apenas arquivos de �udio;
extension	Nesta regra podemos definir uma certa extens�o de arquivo que poder� ser aceito;
phoneUs	Se definido como true, o campo s� aceitar� valor de telefone v�lido dos EUA
require_from_group	Garante que pelo o menos um campo deve ser v�lido dentro de um grupo de campos.

Tabela 1. Regras do Plugin Validation

Repare que outras regras de valida��o adicionais do plugin Validation tamb�m foram apresentadas na tabela e as vemos dentro do script a seguir, dentro da tag .


 <script src="http://jqueryvalidation.org/files/dist
 /additional-methods.min.js"></script>

Agora faremos um exemplo de valida��o de formul�rio utilizando algumas regras destacadas nesta se��o. Para isso, acrescente o c�digo da Listagem 4 no arquivo �index.html�. Logo certifique-se de incluir as Listagens 1 e 3 tamb�m para funcionar a valida��o com o plugin Validation.


<form id="formularioValidation">
  <fieldset>
    <legend>Op��es de valida��o do m�todo validate() do plugin jQuery Validation</legend>
    <p>
      <label for="campo1">Regras: required, email e remote </label>
      <input type="email" id="campo1" name="campo1">
    </p>
    <p>
      <label for="campo2">Regras: minlength, maxlength e rangelength </label>
      <input type="text" id="campo2" name="campo2">
    </p>
    <p>
      <label for="campo3">Regras: min, max e range </label>
      <input type="text" id="campo3" name="campo3">
    </p>
    <p>
      <label for="campo4">Regras: accept </label>
      <input type="file" id="campo4" name="campo4">
    </p>
    <p><b>Grupo de telefones, onde pelo o menos um deve ser v�lido</b><br/>
      <label for="telefone_pessoal">1� require_from_group: Telefone pessoal: </label>
      <input class="grupo_telefone" id="telefone_pessoal" name="telefone_pessoal">
      <br/>
      <label for="telefone_casa">1� require_from_group: Telefone casa: </label>
      <input  class="grupo_telefone" id="telefone_casa" name="telefone_casa">
      <br/>
      <label for="telefone_trabalho">1� require_from_group: Telefone trabalho: </label>
      <input class="grupo_telefone" id="telefone_trabalho" name="telefone_trabalho">
    </p>
    <input type="submit" value="Validar!">
  </fieldset>
</form>

Listagem 4. C�digo da p�gina index.html

Em seguida, acresceste o c�digo da Listagem 5 no arquivo valida�ao.js. � neste arquivo onde definimos as regras de valida��o para o formul�rio da Listagem 4. Certifique-se de incluir a chamada para o arquivo validacao.js com a tag na p�gina index.html para funcionar a valida��o.


 $( "#formularioValidation" ).validate({
    debug: true,
    rules: {
      campo1: {
        required: true,
            email: true,
           // remote: 'check-email.php' //Deve utilizar um arquivo 
           (por exemplo: check-email.php) para verificar algo, e 
           assim retornar um boolean true ou false para satisfazer esta op��o;
      },
          campo2:{
                minlength: 3,
               maxlength: 4,
               // ou
               rangelength: [3, 4] //Realiza a mesma coisa dos anteriores
          },
          campo3:{
                min: 10,
               max: 15,
               // ou
               range: [10, 15] //Realiza a mesma coisa dos anteriores
          },
          campo4:{
                accept: "audio/*"
          },
          telefone_pessoal: {
        require_from_group: [1, ".grupo_telefone"]
      },
      telefone_casa: {
        require_from_group: [1, ".grupo_telefone"]
      },
      telefone_trabalho: {
        require_from_group: [1, ".grupo_telefone"]
      }    
    },
    messages:{
          //exemplo
       campo4: {
        accept: "Mensagem customizada: Informe um tipo de arquivo v�lido!"
                   }
    }
  });

Listagem 5. C�digo do arquivo validacao.js

Por fim, para executaremos este exemplo acessando a p�gina index.html pelo navegador. Em seguida, preencha o formul�rio com dados inv�lidos e depois clique em �Validar!�. Assim, teremos o resultado semelhante � Figura 2.

**Figura 2**. Resultado da valida��o utilizando o m�todo validate()

Criando um m�todo personalizado de valida��o utilizando o plugin Validation

Al�m do jQuery Validation fornecer diversas op��es de valida��o com o m�todo validator(), ainda sim pode surgir uma nova necessidade de valida��o que ainda n�o foi implementada nativamente, por isso o Validation fornece em sua API um m�todo est�tico chamado �addMethod(...)�, que permite ao desenvolvedor criar seu pr�prio m�todo de valida��o.

Para demonstrar essa API criaremos uma nova valida��o que far� a verifica��o se o valor informado � um n�mero de telefone celular v�lido, logo esta valida��o vai al�m de verificar a quantidade de d�gitos no formato de 11 e 10 d�gitos, incluindo o DDD. Ent�o para come�ar, precisamos entender a sintaxe simples do m�todo est�tico �addMethod(...)�, como mostra o c�digo a seguir:


 jQuery.validator.addMethod( <NOME DA VALIDA��O>, 
 <FUN��O COM A IMPLEMENTA��O DA VALIDA��O> )

Diante do cen�rio e da sintaxe apresentada, partiremos para a implementa��o do nosso exemplo. Para isso, adicione o c�digo da Listagem 6 no arquivo index.html, onde ficar� o nosso formul�rio. Em seguida, certifique-se de incluir a Listagem 1 tamb�m para funcionar a valida��o com o plugin Validation.


 <form id="formularioValidaTelefoneCelular">
                  <fieldset>
                  <legend>Criando uma valida��o customizada com o m�todo est�tico addMethod(...)</legend>
          <b>Valida��o do n�mero de celular</b>
           <p>
        <label for="telefone_celular">Telefone celular:</label>
        <input type="text" id="telefone_celular" name="telefone_celular">
      </p>
       <input type="submit" value="Validar!">
      </fieldset>
  </form>

Listagem 6. C�digo do arquivo index.html

Em seguida, adicione o c�digo da Listagem 7 no arquivo validacao.js, que conter� a nossa nova valida��o e a chamada para validar o formul�rio. Certifique-se de incluir a chamada do arquivo validacao.js com a tag na p�gina index.html para funcionar a valida��o.

 
  jQuery.validator.addMethod('celular', function (value, element) {
      value = value.replace("(","");
      value = value.replace(")", "");
      value = value.replace("-", "");
      value = value.replace(" ", "").trim();
      if (value == '0000000000') {
          return (this.optional(element) || false);
      } else if (value == '00000000000') {
          return (this.optional(element) || false);
      } 
      if (["00", "01", "02", "03", , "04", , "05", , "06", , "07", , "08", "09", "10"]
      .indexOf(value.substring(0, 2)) != -1) {
          return (this.optional(element) || false);
      }
      if (value.length < 10 || value.length > 11) {
          return (this.optional(element) || false);
      }
      if (["6", "7", "8", "9"].indexOf(value.substring(2, 3)) == -1) {
          return (this.optional(element) || false);
      }
      return (this.optional(element) || true);
  }, 'Informe um n�mero de telefone celular v�lido!'); 
  //Nosso formul�rio, pronto para ser validado
  $( "#formularioValidaTelefoneCelular" ).validate({
    debug: true,
    rules: {
      telefone_celular: {
        required: true,
                    celular: true,
                  }
    } 
  });

Listagem 7. C�digo do arquivo validacao.js

Por fim, para executarmos o nosso exemplo basta acessar a p�gina index.html em nosso navegador. Com isso, preencha o formul�rio com dados inv�lidos e depois clique em �Validar!�. Assim, teremos o resultado semelhante � Figura 3.

**Figura 3**. Resultado da nossa nova valida��o

Por fim, criamos e testamos a nossa nova valida��o de formul�rio. Diante disso, este exemplo pode ser tomado como base para a cria��o de novas valida��es.

Refatorando regras e mensagens de valida��o

Durante a cria��o de diferentes valida��es de formul�rios em nossa aplica��o utilizando o Plugin Validation, as vezes nos deparamos com v�rios campos com as mesmas regras e mensagens. Para simplificar, a refatora��o pode reduzir essas duplica��es atrav�s dos seguintes m�todos est�ticos do Plugin Validation:

addMethod: adiciona uma nova regra de valida��o;
addClassRules: adiciona uma regra de valida��o a um elemento.

Para exemplificar a refatora��o de um c�digo com duplica��es de regras e mensagens, utilizaremos o seguinte exemplo: imagine que temos dez campos no formul�rio para cadastro de clientes, onde cada um precisa ser preenchido obrigatoriamente e com, no m�nimo, dois caracteres; e para cada regra precisa-se criar mensagens personalizadas.

Podemos apelidar m�todos de valida��o existentes com diferentes mensagens e agrup�-los em uma �nica classe. Para a implementa��o do nosso exemplo crie um arquivo chamado �index_parte_2.html� e depois acrescente o c�digo da Listagem 8. � neste arquivo onde conter� o nosso formul�rio para a valida��o. Em seguida, certifique-se de incluir a Listagem 1 tamb�m para funcionar a valida��o com o plugin Validation.


 <form id="form" method="post" action="">
    <fieldset>
      <legend>Refatorando regras e mensagens de valida��o - Cadastro de cliente </legend>
      <p>
        <label for="campo1">campo 1</label>
        <input class="cliente" type="text" id="campo1" name="campo1" >
      </p>
        <p>
        <label for="campo2">campo 2</label>
        <input class="cliente" type="text" id="campo2" name="campo2" >
      </p>
        <p>
        <label for="campo3">campo 3</label>
        <input class="cliente" type="text" id="campo3" name="campo3" >
      </p>
        <p>
        <label for="campo4">campo 4</label>
        <input class="cliente" type="text" id="campo4" name="campo4" >
      </p>
        <p>
        <label for="campo5">campo 5</label>
        <input class="cliente" type="text" id="campo5" name="campo5" >
      </p>
        <p>
        <label for="campo6">campo 6</label>
        <input class="cliente" type="text" id="campo6" name="campo6" >
      </p>
       <p>
        <label for="campo7">campo 7</label>
        <input class="cliente" type="text" id="campo7" name="campo7" >
      </p>
       <p>
        <label for="campo8">campo 8</label>
        <input class="cliente" type="text" id="campo8" name="campo8" >
      </p>
       <p>
        <label for="campo9">campo 9</label>
        <input class="cliente" type="text" id="campo9" name="campo9" >
      </p>
       <p>
        <label for="campo10">campo 10</label>
        <input class="cliente" type="text" id="campo10" name="campo10" >
      </p>
      <p>
        <input type="submit" value="Enviar">
      </p>
    </fieldset>
  </form>

Listagem 8. C�digo do arquivo index_parte_2.html

Em seguida, crie um arquivo chamado �validacao_parte_2.js� e depois acrescente neste o c�digo da Listagem 9, que conter� o nosso c�digo de valida��o alinhado com os requisitos do nosso exemplo. Em seguida, certifique-se de incluir o arquivo validacao_parte_2.js com a tag na p�gina index_parte_2.html para funcionar a valida��o.

 
//Valida o formul�rio
$( "#form" ).validate({
  debug: true
});
 // apelido necess�rio para o cRequired com nova mensagem
 $.validator.addMethod("cRequired", $.validator.methods.required,
   "Informa��o do cliente necess�ria");
 // apelido cMinlength
 $.validator.addMethod("cMinlength", $.validator.methods.minlength,
   $.validator.format("Informa��o do cliente deve ter pelo menos {0} caracteres"));
 // combina os dois, aplicando as regras nos campos que contenham a classe chamada "cliente"
 $.validator.addClassRules("cliente", { cRequired: true, cMinlength: 2 });

Listagem 9. C�digo do arquivo validacao_parte_2.js

Podemos destacar que para adicionar as novas valida��es utilizamos o m�todo est�tico addMethod, onde passamos tr�s par�metros: no primeiro adicionamos os apelidos ou nomes das nossas valida��es chamadas �cRequired� e �cMinlength�; no segundo passamos as regras existentes afim de reutilizar suas estruturas de valida��o; e no �ltimo par�metro passamos as mensagens customizadas. Por fim, utilizamos o m�todo est�tico addClassRules para aplicar as duas regras nos campos que contenham a classe chamada "cliente".

Para executarmos o nosso exemplo basta acessar a p�gina index.html pelo navegador. Em seguida, preencha o formul�rio com dados inv�lidos e depois clique no bot�o �enviar�, assim, teremos o resultado semelhante � Figura 4.

**Figura 4**. Resultado das nossas novas valida��es

Assim chegamos ao fim do nosso artigo, onde foi apresentado os conceitos, as principais caracter�sticas e sobre como utilizar o Plugin Validation. Assim, espero que este Plugin seja �til em seus projetos como demonstrou ser durante este artigo.

Bibliografia:

ZAEFFERER, J�rn. JQuery Validation Plugin.
EQUIPE JQUERY jQuery API.

Confira tamb�m

jQuery

Guia

Valida��o de formul�rios com jQuery

Curso

Primeiros passos com a jQuery

Curso

Tecnologias:

Confira outros conte�dos:

CSS Border

HTML Icons: utilizando �cones em...

HTML hr: como utilizar a tag hr para...

Assista grátis a nossa aula inaugural

Perguntas frequentes

Quem somos?

Por que a programação se tornou a profissão mais promissora da atualidade?

Como faço para começar a estudar?

Em quanto tempo de estudo vou me tornar um programador?

Sim, você pode se tornar um programador e não precisa ter diploma de curso superior!

O que eu irei aprender estudando pela DevMedia?

Principais diferenciais da DevMedia

Qual o investimento financeiro que preciso fazer para me tornar um programador?

Como funciona a forma de pagamento da DevMedia?

Por Brendo Em 2015

Coment�rios nesta publica��o Escrever um coment�rio sobre conte�do

Jo�o Santos

N�vel 1

Ol� gostaria de saber como fa�o pra mandar Mensagem com o (require_from_group) , ele at� aceita o filtro e s� envia o formul�rio se algum dos meu 3 campos est� preenchido , mais ele n�o mostra nenhuma mensagem de error .
C�digo Abaixo .

$(function () {
// Validation
$("#form-create").validate({
// Rules for form validation
rules: {
numeronf: {
require_from_group: [1,".form-control"]

},
Sfat: {
require_from_group: [1, ".form-control"]
},
chassi: {
require_from_group: [1, ".form-control"]
}

},

// Messages for form validation
messages: {
numeronf: {
require_from_group: 'Informe Um dos tr�s campos assima',
},
Sfat: {
require_from_group: 'Informe o Sftat'
},
chassi: {
require_from_group: 'Informe o Chassi'
}

},

// Do not change code below
errorPlacement: function (error, element) {
error.insertAfter(element.parent());
}
});
});

há +1 ano

Rodolfo Gomes

DevMedia

Opa Jo�o, tranquilo?

Compartilharei com nosso consultor e o mais breve ele te retornar�

Grande abra�o!

há +1 ano

Paulo Junior

N�vel 0

Boa noite estou usando jquery selectBox

algu�m sabe como posso validar os campos com jquery validate ?

Plugin Selectbox
https://github.com/marcj/jquery-selectBox

há +1 ano

Ver coment�rios anteriores (2)

Marcio Souza

DevMedia

Ol� Paulo,
realmente com o SelectBox n�o funciona. Deve ter algum macete que n�o descobri qual � ou pode ser um bug na biblioteca. Voc� pode criar perguntar sobre isso l� na p�gina do SelectBox - https://github.com/marcj/jquery-selectBox/issues - se tiver interesse.

J� com o select2 funcionou. Voc� deve deixar o value vazio da op��o invalida e depois testar o tamanho l� na valida��o:

// no html 
 <form id="myform"> 
 <select name="year" style="width: 100px;"> 
 <option value="">Year</option> 
 <option value="1">1955</option> 
 <option value="2">1956</option> 
 </select> 
 <br/> 
 <input type="submit" /> 
 </form> 
 // no JS 
 $(document).ready(function () { 
 // default 
 $('select').select2(); 
 $('#myform').validate({ // initialize the plugin 
 rules: { 
 year: { 
 required: true, minlength: 1 
 } 
 }, 
 messages: { 
 year: "Selecione um ano" 
 }, 
 submitHandler: function (form) { // for demo 
 alert('valid form submitted'); // for demo 
 return false; // for demo 
 } 
 }); 
 });

há +1 ano

Celio Junior

N�vel

Muito bom o tutorial!

Gostaria de validar um formul�rio usando as class de cada elemento, ao inv�s do id, que � utilizado como exemplo.

� poss�vel?

$(".form_edita_pedido").validate({});

rules: {

'.percentual': {

required: true

}

},

messages: {

'.percentual': "Preencha o campo!",

}

});

há +1 ano

Ver coment�rios anteriores (4)

Henrique Gasparotto

N�vel 0

Opa Caixa Brasil, tudo bem?

O validation funciona da mesma forma para os modais, n�o h� diferen�a nenhuma. O que mudaria seria s� a abertura do modal. A� eu te sugiro utilizar solu��es prontas, como o jquery simple modal e o modal da jQuery UI.

Um abra�o!

há +1 ano

Fernando Colombo

N�vel 0

Excelente tutorial.

Poderia me explicar a utilidade/funcionalidade do comando this.optional(element) que voc� tanto usou no seu exemplo do addMethod?

há +1 ano

Ver coment�rio anterior

Julio Sampaio

N�vel 0

Fala Fernando!

A fun��o do m�todo this.optional(element) � retornar imediatamente true caso o elemento esteja vazio e n�o seja obrigat�rio. Desta forma, evita-se executar a outra valida��o (j� que � um campo n�o obrigat�rio).

Abra�o!

há +1 ano

Nossos casos de sucesso

Leonardo Carlos

Eu sabia pouqu�ssimas coisas de programa��o antes de come�ar a estudar com voc�s, fui me especializando em v�rias �reas e ferramentas que tinham na plataforma, e com essa bagagem consegui um est�gio logo no in�cio do meu primeiro per�odo na faculdade.

Lucas Rodrigues

Estudo aqui na Dev desde o meio do ano passado! Nesse per�odo a Dev me ajudou a crescer muito aqui no trampo.
Fui o primeiro desenvolvedor contratado pela minha empresa. Hoje eu lidero um time de desenvolvimento!
Minha meta � continuar estudando e praticando para ser um Full-Stack Dev!

Her�clito J�nior

Economizei 3 meses para assinar a plataforma e sendo sincero valeu muito a pena, pois a plataforma � bem intuitiva e muuuuito did�tica a metodologia de ensino. Sinto que estou EVOLUINDO a cada dia. Muito obrigado!

Julio Cablen

Nossa! Plataforma maravilhosa. To amando o curso de desenvolvimento front-end, tinha coisas que eu ainda n�o tinha visto. A did�tica � do jeito que qualquer pessoa consegue aprender. S�rio, to apaixonado, adorando demais.

Joelberth Sena

Adquiri o curso de voc�s e logo percebi que s�o os melhores do Brasil. � um passo a passo incr�vel. S� n�o aprende quem n�o quer. Foi o melhor investimento da minha vida!

Felipe Nunes

Foi um dos melhores investimentos que j� fiz na vida e tenho aprendido bastante com a plataforma. Voc�s est�o fazendo parte da minha jornada nesse mundo da programa��o, irei assinar meu contrato como programador gra�as a plataforma.

Wanderson Oliveira

Comprei a assinatura tem uma semana, aprendi mais do que 4 meses estudando outros cursos. Exerc�cios pr�ticos que n�o tem como n�o aprender, est�o de parab�ns!

Jos� Lucas

Obrigado DevMedia, nunca presenciei uma plataforma de ensino t�o presente na vida acad�mica de seus alunos, parab�ns!

Eduardo Dorneles

Aprendi React na plataforma da DevMedia h� cerca de 1 ano e meio... Hoje estou h� 1 ano empregado trabalhando 100% com React!

Adauto Junior

J� fiz alguns cursos na �rea e nenhum � t�o bom quanto o de voc�s. Estou aprendendo muito, muito obrigado por existirem. Est�o de parab�ns... Espero um dia conseguir um emprego na �rea.

Ver todos os casos de sucesso

Valida��o com jQuery: Como usar o plugin Validation

Veja neste artigo como utilizar o Framework jQuery Validation para a cria��o de valida��es de formul�rios web.

Conhecendo o Plugin jQuery Validation

Trabalhando com o m�todo validate() do Plugin Validation

Criando um m�todo personalizado de valida��o utilizando o plugin Validation

Refatorando regras e mensagens de valida��o

Confira tamb�m

jQuery

Valida��o de formul�rios com jQuery

Primeiros passos com a jQuery

Confira outros conte�dos:

CSS Border

HTML Icons: utilizando �cones em...

HTML hr: como utilizar a tag hr para...

Perguntas frequentes

Nossos casos de sucesso