Sylverio » JavaScript

Validação de formulário com JQuery

Carlos Fernando Sylverio — Thu, 29 Oct 2009 00:46:07 +0000

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:


    Nome:

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.


    Nome:
            O seu nome deve conter, no mínimo, 2 caracteres.

Enjoy

Introdução ao Ajax

Carlos Fernando Sylverio — Tue, 20 Oct 2009 01:13:58 +0000

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>Produtotitle>
        <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 produtoh1>
        <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">Canetaoption>
                    <option value="1">Borrachaoption>
                    <option value="2">Gizoption>
                    <option value="3">Apagadoroption>
                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:


    $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;
?>
Calculo:

    
        Produto
        Quantida
        Valor unidade
        Total
    
    
         print $prodName ?>
         print $qtd ?>
         echo "R$ " .number_format($vlr, 2, ',', '.'); ?>
         echo "R$ " .number_format($total, 2, ',', '.'); ?>

Futuramente falarei um pouco mais sobre o componente XmlHttpRequest e seus recursos.
Enjoy

Apresentando o JQuery

Carlos Fernando Sylverio — Wed, 11 Feb 2009 02:18:38 +0000

Há um bom tempo tudo está convergindo para web, e com isso surgem coisas interessantes, é o caso de uma bibliotéca de JavaScript chamada JQuery.

Há um ano mais ou menos quando um amigo meu me apresentou fiquei impressionado com a facilidade de codificação, efeitos visuais e possibilidades de uso que essa biblioteca propociona para o desenvolvimento de aplicações Web e continuo me impressionando a cada nova versão.

As principais características do JQuery que se destacam são:

Robusto e eficiente mecanismo de acesso a partes da página (DOM).
Modifica a aparência da página.
Alteração do conteúdo da página.
Variedade de eventos para interação com os usuários.
Adição de efeitos visuais as páginas.
Implementação de Ajax de forma fácil.
Simplificação de tarefas comuns em JavaScript.

É uma biblioteca estável e já utilizada por diversas corporações. Em sua página Web é possível acessar sua documentação, especificações, plugins de interface, de forma muito estruturada.

Futuramente falerei mais sobre essa biblioteca e criarei alguns exemplos de sua utilização.

Até mais

Produto	Quantida	Valor unidade	Total
print $prodName ?>	print $qtd ?>	echo "R$ " .number_format($vlr, 2, ',', '.'); ?>	echo "R$ " .number_format($total, 2, ',', '.'); ?>