Postado por Carlos Fernando Sylverio | Postado em Programação, Tecnologia | Postado em 28-10-2009
1
Validation é um plugin do framework jQuery que permite fazer a validação de formulários de várias maneiras.
Neste post vou demonstrar como realizar algumas validações em um formulário utilizando o este plugin.
Para é necessário fazer o download do jQuery plugin: Validation
Pronto agora que temos todos os arquivos necessário, devemos incluir na tag
de nosso exemplo o seguinte trecho de código:
<script language="JavaScript" src="jquery/jquery-1.3.2.js" type="text/javascript"></script>
<script language="JavaScript" src="jquery-validate/jquery.validate.js" type="text/javascript"></script>
Ainda dentro da tag head, inserimos o trecho de código que fará a validação de nosso formulário:
$(document).ready( function() {
$("#cadastro").validate({
// Define as regras
rules:{
nomeCliente:{
required: true,
minlength: 2
}
},
// Define as mensagens de erro para cada regra
messages:{
nomeCliente:{
required: "Digite o seu nome.",
minLength: "O seu nome deve conter, no mínimo, 2 caracteres."
}
}
});
});Agora é só inserir o código HTML do formulário a página:
<form id="cadastro" method="post" action="">
<p><label>Nome:</label><input type="text" id="nome_cliente" name="nomeCliente" /></p>
<input type="submit" value="Enviar" />
</form>Observe que as regras e mensagens aplicadas a caixa de texto são referênciadas pelo nome do elemento (atributo name) e não pelo id.
Dessa forma, podemos fazer validações de formulário, de uma forma simples e rápida. Mais informações e métodos de valições podem ser entrados na documentação oficial do JQuery.
Para quem conhece css, o código gerado ao apresentar a mensagem contem o atributo class com o valor error, que pode ser usado para aprimorar o layout do formulário.
<form id="cadastro" action="" method="post">
<p><label>Nome:</label><input id="nome_cliente" class="error" type="text" name="nomeCliente"/>
<label class="error" for="nome_cliente" generated="true">O seu nome deve conter, no mínimo, 2 caracteres.</label>
</p>
<input class="submit" type="submit" value="Enviar"/>
</form>Enjoy 
Postado por Carlos Fernando Sylverio | Postado em Programação, Tecnologia | Postado em 19-10-2009
0
O problema que o Ajax tenta resolver está enraizado no protocolo de comunicação HTTP. Isso porque esse protocolo é sem estado (stateless), assim o controle das ações executadas na aplicação cliente é controlado pelo código no servidor web. Ou seja, as alterações (ou entrada de dados) executadas na página web pelo usuário são enviadas para o servidor para que este atualize seu estado, e o servidor responde a alteração reenviado todo o HTML para o browser.
Mas o que é o Ajax?
Ajax é o acrônimo (da língua inglesa) de Asynchronous Javascript and XML, ele não é uma linguagem de programação e sim a combinação de tecnologias existentes (Javascript, XML e XmlHttpRequest) que nos permite realizar solicitações assíncronas ao servidor para busca de informações e/ou atualizar seu estado.
Em outras palavras o Ajax, é um objeto presente nos browser atuais que combinado com JavaScript pode se comunicar com o servidor Web sem recarregar e redesenhar a página inteira.
Utilizando do Ajax
O exemplo abaixo apresenta uma página chamada calcProduto.html, onde o usuário escolhe o tipo de produto e informa a quantidade de produto que gostaria de adquir. Ao clicar no botão calcular, é realizado via ajax uma requisição ao servidor web (arquivo calcProduto.php) que realiza o calculo necessário e sua reposta é renderizada sem recarregar a página html.
Abaixo o código do arquivo calcProduto.html:
<html>
<head>
<title>Produto</title>
<script language="javascript" type="text/javascript">
var request = null;
// função que cria objeto de requisição
function createRequest () {
try {
// cria objeto XmlHttpRequest para os browser Firefox, Safari, Opera
request = new XMLHttpRequest();
} catch( trymicrosoft ) {
try {
// cria objeto XmlHttpRequest para o browser IE
request = new ActiveXObject( "Msxm12.XMLHTTP" );
} catch( othermicrosoft ) {
try{
// cria objeto XmlHttpRequest para o browser IE
request = new ActiveXObject( "Microsoft.XMLHTTP" );
} catch( failed ) {
request = null;
}
}
}
if ( request == null ) {
alert( "Erro ao criar objeto Request!" );
}
}
// função que executa chamada ao servidor para realizar o calculo
function getPrice () {
createRequest ();
var prod = document.getElementById( "produto").value;
var qtd = document.getElementById( "quantidade").value;
var url = "calcProduto.php?produto=" + prod + "&quantidade=" + qtd;
request.open( "GET", url, true );
request.onreadystatechange = updatePage; // define função a ser chamada a obter resposta do servidor web
request.send( null ); // null informa que não está sendo enviado nenhum dado na requisição
}
// função chamada ao obter retorno da requisição e atualiza interface
function updatePage () {
if( request.readyState == 4 ) {
if( request.status == 200 ){
var resultado = document.getElementById( "resultado" );
resultado.innerHTML = request.responseText;
}
else{
alert( "Erro: não foi possível obter resposta do servidor." );
}
}
}
</script>
</head>
<body>
<h1>Calculo de produto</h1>
<p> Escolha um produto e informe a quantidade.</p>
<form method="GET" action="calcProduto.php">
<p> Produto:
<select name="produto" id="produto">
<option value="0">Caneta</option>
<option value="1">Borracha</option>
<option value="2">Giz</option>
<option value="3">Apagador</option>
</select>
</p>htm
<p> Quantidade <input type="text" name="quantidade" id="quantidade"></p>
<p><input type="button" value="Calcular" onClick="getPrice();"></p>
</form>
<div id="resultado">
</div>
</body>
</html>O código utilizado no servidor web:
<?php
$produto = $_REQUEST['produto'];
$qtd = $_REQUEST['quantidade'];
$prodName = '';
$vlr = '';
switch($produto){
case "0":
$prodName = 'Caneta';
$vlr = 1;
break;
case '1':
$prodName = 'Borracha';
$vlr = 2;
break;
case '2':
$prodName = 'Giz';
$vlr = 3;
break;
case '3':
$prodName = 'Apagador';
$vlr = 4;
break;
}
$total = $qtd * $vlr;
?>
<h3>Calculo:</h3>
<table border=1 >
<tr>
<td>Produto</td>
<td>Quantida</td>
<td>Valor unidade</td>
<td>Total</td>
</tr>
<tr>
<td><?php print $prodName ?></td>
<td><?php print $qtd ?></td>
<td><?php echo "R$ " .number_format($vlr, 2, ',', '.'); ?></td>
<td><?php echo "R$ " .number_format($total, 2, ',', '.'); ?></td>
</tr>
</table>Futuramente falarei um pouco mais sobre o componente XmlHttpRequest e seus recursos.
Enjoy
seguidores
leitores