Validar Formulário com Jquery

Validar Formulário com Jquery

Script atualizado, está mais simples, funcional e bonito (kkk) , abaixo o link:

http://clares.com.br/2012/06/02/validacao-de-formularios-com-jquery-plugin-atualizado/

Existem diversos plugins jQuery para validação de formulários mas os que testei exigem alguma programação, ou seja, é preciso aprender os métodos do plugin, etc …
Pensando em um script que não necessite de conhecimentos avançados em JQuery e nem programação, resolvi escrever mais esse script, que não é (ainda) tão completo como os plugins mas é  útil.
Ainda preciso criar a validação de:  radio, checkbox, select (estado inicial) e daí atualizo o post.

O script vai validar campos de um formulário com JQuery, os campos validados na versão atual do script são:
– campo obrigatório
– campo númerico
– campo email
– campo valor mínimo
– campo valor máximo
– campo password (confere os 2 campos senha1 e senha2)

Exemplo:

<html>
 <head>
 <title>Validate Script</title>
 <script src="http://clareslab.com.br/learn/validate/jquery.min.js">
 <script src="http://clareslab.com.br/learn/validate/validate.js">
 <script type="text/javascript">
 function teste(){
 // valida o forumario f1
 validate('f1');
 //checa a validacao
 if(validateState){
 //seu codigo
 alert('validado');
 // para submeter o form
 // document.f1.submit();
 }
 }
 </script>
 </head>
<body>
 <form name="f1" id="f1"  onSubmit="return false" >

 <label>String Min 5:</label>
 <input type="text" name="str" id="str" min="5" />

 <label>Númerico min 5 - max 10:</label>
 <input type="text" name="num" id="num" min="5" max="10" class="numeric" />

 <label>Email:</label>
 <input type="text" name="mail" id="mail" class="required email" />

 <label>Password:</label>
 <input type="password" name="password" id="password"  class="required password" />

 <label>(re)Password:</label>
 <input type="password" name="rpassword" id="rpassword" class="required password" />

 <button onclick="return teste()">Valida Form</button>
 <p id="validate_message"> </p>

 </form>
</body>
</html>

Os parâmetros para a validação consistem apenas em adicionar as classes ou atributos min/max nos campos, ex:


Para um campo requerido/obrigatório
<input type="text" name="test" id="test" class="required" />

Para um campo númerico / requerido
<input type="text" name="test" id="test" class="required numeric" />

Para um campo com valor e-mail / requerido
<input type="text" name="test" id="test" class="required email" />

Para um campo com valor mínimo / requerido
<input type="text" name="test" id="test" min="5" class="required" />

Para um campo com valor máximo / requerido
<input type="text" name="test" id="test" max="5" class="required" />

Para um campo com valor password / requerido
<input type="password" name="pass1" id="pass1" class="required password" />
<input type="password" name="pass2" id="pass2" class="required password" />

As mensagens de retorno da validação são direcionadas ao elemento de id validate_message, então é por isso que existe o elemento:
<p id="validate_message"> </p>

Sem um elemento com esse ID as mensagens são omitidas.

No caso do password, serão conferidos os valores dos 2 campos com classe password

Para validar o formulário, basta chamar a função validate(‘idDoFormulario’) em uma outra função, ex:

 function add(){
 validate('idDoForm');
 if(validateState){
 // seu codigo
 // alert('validado')
 // enviar formulario
 // $('#idDoForm').submit();
 }
 }

Após ter chamado a função validate() seu estado (false / true) é armazenado na var validateState.
obs: o método validate() não tem retorno (false / true), seu estado só pode ser acessado através da var validateState, isso ocorre porque o método utiliza loop e passa por diversos estados.

Para alterar as mensagens da validacao basta abrir o arquivo validate.js e alterar as vars:

/* Required message */
validateRequiredMsg = "Campo de preechimento obrigatório";
/* E-mail message */
validateMailMsg = "E-mail informado é inválido";
/* Numeric message */
validateNumericMsg = "O valor deve ser númerico";
/* Min message */
validateMinMsg = "A quantidade mínima de caracteres é: ";
/* Max message */
validateMaxMsg = "A quantidade máxima de caracteres é: ";
/* Password message */
validatePasswordMsg = "Senhas não conferem";

Demo: Validate
Download: Validate

Abs,

Comments

  1. By Paulo De Tarso

  2. By Paulo De Tarso

      • By Paulo De Tarso

  3. By Paulo De Tarso

  4. By Paulo De Tarso

    • By Paulo De Tarso

  5. By André Felipe

      • By Patrícia

%d blogueiros gostam disto: