Skip to content

Validação de campos usando jQuery

Validação de campos usando jQuery

Hoje iremos usar uma linguagem de programação conhecida com jQuery para validar os campos, ou seja no exemplo de um formulário de cadastro onde os usuários não podem deixar o nome, e-mail ou os outros campos em branco, para isso iremos criar o formulário onde ele basicamente vai fazer a seguinte verificação “ se o campo nome estiver vazio vou avisar ao usuário que este campo não pode ser vazio”, ou alguma outra mensagem que você queira colocar, por exemplo “este campo não pode estar vazio” para isso iremos usar um formulário padrão de envio de e-mail.

Antes de podermos brincar com o jQuery precisamos fazer o download de 2 arquivos, o plugin de validação e o jQuery, os arquivos estão dispostos nos seguintes link abaixo:

Baixe o plugin jQuery Validate
Baixe o jQuery aqui

No segundo exemplo você não precisa baixar o arquivo, basta copiar o código que ele gera e copiar em algum arquivo, para que seja usado depois.

Crie um novo arquivo com o seguinte código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Exemplo de validação de campos com jQuery - YESbr Agência Web</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
</head>

<body>
</form>
<form id="formularioContato" onSubmit="return validar(this);" action="" method="post">
  <table width="577" border="0" align="center" cellpadding="5" cellspacing="0">
    <tr>
      <td colspan="3" align="center" scope="col"><span>Fale Conosco</span></td>
    </tr>
    <tr>
      <td width="123"><div align="right"><strong>Nome(*) </strong></div></td>
      <td width="432"><input type="text" name="nome" size="50" /></td>
    </tr>
    <tr>
      <td><div align="right"><strong>E-mail(*)</strong></div></td>
      <td><input type="text" name="email" size="50" /></td>
    </tr>
    <tr>
      <td><strong><div align="right">Mensagem(*)</div></strong></td>
      <td><textarea name="mensagem" cols="50" rows="5"></textarea></td>
    </tr>
    <tr>
      <td colspan="3" align="center"><input type="submit" name="Enviar" value="Enviar " />
        <input type="reset" name="Limpar" value="Limpar" /></td>
    </tr>
  </table>
</form>
</body>
</html>

Agora criamos um formulário básico de envio de e-mail, contendo o nome do usuário, a mensagem e o e-mail dele pra contato.

Para fazermos uma conexão com nosso script usamos a seguinte tag agora:

<script language="JavaScript" src="jquery/jquery.js" type="text/javascript"></script>
<script language="JavaScript" src="jquery/jquery.validate.js" type="text/javascript"></script>

Estas linhas vão dentro da tag <head></head>.

Então nossa página até o momento esta assim:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Exemplo de validação de campos com jQuery - YESbr Agência Web</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<script language="JavaScript" src="jquery/jquery.js" type="text/javascript"></script>
<script language="JavaScript" src="jquery/jquery.validate.js" type="text/javascript"></script>
</head>

<body>
</form>
<form id="formularioContato" onSubmit="return validar(this);" action="" method="post">
  <table width="577" border="0" align="center" cellpadding="5" cellspacing="0">
    <tr>
      <td colspan="3" align="center" scope="col"><span>Fale Conosco</span></td>
    </tr>
    <tr>
      <td width="123"><div align="right"><strong>Nome(*) </strong></div></td>
      <td width="432"><input type="text" name="nome" size="50" /></td>
    </tr>
    <tr>
      <td><div align="right"><strong>E-mail(*)</strong></div></td>
      <td><input type="text" name="email" size="50" /></td>
    </tr>
    <tr>
      <td><strong><div align="right">Mensagem(*)</div></strong></td>
      <td><textarea name="mensagem" cols="50" rows="5"></textarea></td>
    </tr>
    <tr>
      <td colspan="3" align="center"><input type="submit" name="Enviar" value="Enviar " />
        <input type="reset" name="Limpar" value="Limpar" /></td>
    </tr>
  </table>
</form>
</body>
</html>

validacao-de-campos-usando-jquery

Porém até agora, temos um formulário de envio de e-mail que por si só já seria algo muito interessante para ser utilizado em um site, porem como podemos deixar mais interessante esta programação? Podemos criar uma programação que por exemplo, impedisse a página de mandar campos em branco por exemplo alguém lhe envia um e-mail interessante, e você deseja enviar uma resposta para essa pessoa, que por descuido não informou o e-mail, para evitar isso iremos criar uma página que faça essa validação ou seja a página ira pegar as informações e fazer uma checagem prévia, vendo se todos os campos estão preenchidos , para isso usaremos uma página de validação.

Para criarmos este formulário de validação nos usaremos o Jquery , lembra que no começo da nossa página HTML colocamos as seguintes tags,

<script language="JavaScript" src="jquery/jquery.js" type="text/javascript"></script>
<script language="JavaScript" src="jquery/jquery.validate.js" type="text/javascript"></script>

Essas tags  fazer o seguinte elas vão “buscar” nosso formulário jQuery, e o executa, para criarmos um formulário jQuery usaremos a seguinte programação, ela é a parte que ira executar a validação checando se os campos estão vazios? E se tiver ira executar as mensagem, esta é uma condição semelhante a ifs  usados em outras linguagens imagine da seguinte forma, o código ira fazer a primeira verificação “o campo nome esta vazio?” não então vamos para a segunda parte “o campo e-mail esta vazio?” não então vamos para a próxima e assim por diante.

$(document).ready( function() {
    $("#formularioContato").validate({
        // Define as regras
        rules: {
            nome: {
                // campoNome será obrigatório (required) e terá tamanho mínimo (minLength)
                required: true, minlength: 2
            },
            email: {
                // campoEmail será obrigatório (required) e precisará ser um e-mail válido (email)
                required: true, email: true
            },
            mensagem: {
                // campoMensagem será obrigatório (required) e terá tamanho mínimo (minLength)
                required: true, minlength: 2
            },
        },
        // Define as mensagens de erro para cada regra
        messages: {
            nome: {
                required: "Digite o seu nome", minLength: "O seu nome deve conter, no mínimo, 2 caracteres"
            },
            email: {
                required: "Digite o seu e-mail para contato", email: "Digite um e-mail válido"
            },
            mensagem: {
                required: "Digite a sua mensagem", minLength: "A sua mensagem deve conter, no mínimo, 2 caracteres"
            }
        }
    });
});

Vamos explicar o código, ele faz o seguinte ele diz por exemplo “requerimento” ou seja o campo é requerido em seguida temos a opção “true” o seja verdade oque significa que o requerimento é verdadeiro, e o minLength significa o tamanho mínimo do campo. Então e ele vê se o campo não estiver as condições predeterminadas por você ele executa a parte seguinte do código que é a execução das mensagens de erro, porem não seria legal se pudéssemos mudar a formatação da mensagem? Por exemplo colocar o texto em vermelho, ou em cores que combinem com o site? Bom vamos criar este pequeno trecho de programação em CSS.

* {
    font-family: Verdana;
    font-size: 96%;
}
label {
    display: block;
    margin-top: 10px;
}
label.error {
    float: none;
    color: red;
    margin: 0 .5em 0 0;
    vertical-align: top;
    font-size: 10px
}
p {
    clear: both;
}
.submit {
    margin-top: 1em;
}
em {
    font-weight: bold;
    padding-right: 1em;
    vertical-align: top;
}

Dentro deste formulario criamos a condição “se a mensagem tiver que aparecer, aparecera como eu quero” e damos as condições como cor da fonte, tamanho da letra etc.

O código completo da página esta logo abaixo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Exemplo de validação de campos com jQuery - YESbr Agência Web</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<script language="JavaScript" src="jquery/jquery.js" type="text/javascript"></script>
<script language="JavaScript" src="jquery/jquery.validate.js" type="text/javascript"></script>
<style type="text/css">
* {
    font-family: Verdana;
    font-size: 96%;
}
label {
    display: block;
    margin-top: 10px;
}
label.error {
    float: none;
    color: red;
    margin: 0 .5em 0 0;
    vertical-align: top;
    font-size: 10px
}
p {
    clear: both;
}
.submit {
    margin-top: 1em;
}
em {
    font-weight: bold;
    padding-right: 1em;
    vertical-align: top;
}
</style>
<script>
$(document).ready( function() {
    $("#formularioContato").validate({
        // Define as regras
        rules: {
            nome: {
                // campoNome será obrigatório (required) e terá tamanho mínimo (minLength)
                required: true, minlength: 2
            },
            email: {
                // campoEmail será obrigatório (required) e precisará ser um e-mail válido (email)
                required: true, email: true
            },
            mensagem: {
                // campoMensagem será obrigatório (required) e terá tamanho mínimo (minLength)
                required: true, minlength: 2
            },
        },
        // Define as mensagens de erro para cada regra
        messages: {
            nome: {
                required: "Digite o seu nome", minLength: "O seu nome deve conter, no mínimo, 2 caracteres"
            },
            email: {
                required: "Digite o seu e-mail para contato", email: "Digite um e-mail válido"
            },
            mensagem: {
                required: "Digite a sua mensagem", minLength: "A sua mensagem deve conter, no mínimo, 2 caracteres"
            }
        }
    });
});
</script>
</head>

<body>
</form>
<form id="formularioContato" onSubmit="return validar(this);" action="" method="post">
  <table width="577" border="0" align="center" cellpadding="5" cellspacing="0">
    <tr>
      <td colspan="3" align="center" scope="col"><span>Fale Conosco</span></td>
    </tr>
    <tr>
      <td width="123"><div align="right"><strong>Nome(*) </strong></div></td>
      <td width="432"><input type="text" name="nome" size="50" /></td>
    </tr>
    <tr>
      <td><div align="right"><strong>E-mail(*)</strong></div></td>
      <td><input type="text" name="email" size="50" /></td>
    </tr>
    <tr>
      <td><strong><div align="right">Mensagem(*)</div></strong></td>
      <td><textarea name="mensagem" cols="50" rows="5"></textarea></td>
    </tr>
    <tr>
      <td colspan="3" align="center"><input type="submit" name="Enviar" value="Enviar " />
        <input type="reset" name="Limpar" value="Limpar" /></td>
    </tr>
  </table>
</form>
</body>
</html>

Para concluir basta que voce altere os diretórios das pastas do jQuery, para o diretório onde você as salvou.

Confira o exemplo funcionando.

No comment yet, add your voice below!


Add a Comment

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *