Willian Fernandes

Não é difícil fazer validações de formulários no lado do cliente usando JavaScript. E com jQuery a brincadeira fica ainda mais fácil.

A primeira coisa a fazer é baixar o jQuery: http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js
Renomei o arquivo para jquery.js.

Depois precisaremos baixar o plugin de validação, feito em jQuery: http://jquery.bassistance.de/validate/jquery.validate.zip
Descompacte o zip. Utilizaremos apenas o arquivo jquery.validate.js.

Agora vamos ao código!

O Formulário

<form id="form-signup" action="#" method="post" accept-charset="utf-8">
    <fieldset>
        <legend>Formulário de Cadastro</legend>
        <label>
            Nome:
            <input type="text" name="nome" />
        </label>
        <label>
            E-mail:
            <input type="text" name="email" />
        </label>
        <label>
            Sexo:
            <select name="sexo">
                <option value="">Selecione</option>
                <option value="F">Feminino</option>
                <option value="M">Masculino</option>
            </select>
        </label>
        <input type="submit" value="Cadastrar" />
    </fieldset>
</form>

A Validação JavaScript

// Inicia o validador ao carregar a página
$(function() {
    // valida o formulário
    $('#form-signup').validate({
        // define regras para os campos
        rules: {
            nome: {
                required: true,
                minlength: 2
            },
            email: {
                required: true,
                email: true
            },
            sexo: {
                required: true
            }
        },
        // define messages para cada campo
        messages: {
            nome: "Preencha o seu nome",
            email: "Preencha seu e-mail de contato",
            sexo: "Informe seu sexo"
        }
    });
});

Veja o exemplo!

O DGmike publicou o post Retornando o último número (script PHP), o Elcio mostrou a visão dele em Retornando o último número (script Python) e resolvi fazer o mesmo em JavaScript:

function ultimoNumero(str) {
    return str.match(/\d+/g).pop();
}

[UPDATE]

Uma simples correção para quando não for passado uma string e para quando a string for vazio ou não tiver números:

function ultimoNumero(str) {
    try {
        return str.match(/\d+/g).pop();
    } catch(e) {
        return '';
    }
}

Muito simples, não?

Atualmente estou alocado em um cliente, desenvolvendo um projeto de grande porte. Esse cliente reformulou todo o seu site e estão tendo alguns problemas com as mudanças.

Ontem ouvi uma conversa vindo de uma mesa próxima a minha. Aquela conversa me deixou indignado a ponto de colocar o fone de ouvido, procurar algumas músicas do System of a Down e aumentar o volume do som. Veja um trecho da conversa:

Fulano 1: Cara, você conhece o navegador Safari?
Fulano 2: Sim, é um navegador da Apple.
Fulano 1: Você tem ele instalado aí?
Fulano 2: Aqui não, tenho somente em casa. Por quê?
Fulano 1: Você já acessou o novo site da Nossa Empresa no Safari? Tem alguns clientes ligando aqui dizendo que o site fica todo desformatado no Safari.
Fulano 2: Não, ainda não abri. Mas abri no no Firefox e vi que nele também fica desformatado. O menu vai parar no canto da tela…
Fulano 1: Assim não dá! Não posso fazer uma programação diferente para cada tipo de navegador! O usuário que se vire para acessar o site. Ele que utilize o Internet Explorer para navegar em nosso site. No IE funciona perfeitamente.
Fulano 2: Acho que você terá que fazer um “scriptizinho” para identificar o navegador do usuário e utilizar um JavaScript para cada navegador.

E depois disso a conversa foi piorando cada vez mais… Fazia tempo que eu não ouvia alguém falando um absurdo desses e achava que não ouviria mais.

Para que servem os Padrões Web? E a programação de JavaScript Cross-browser?

Muitas pessoas, assim como eu, ouviram esse diálogo e, na hora do almoço, foi o comentário da mesa…rs Daí comecei a chegar em uma conclusão:
A maioria das pessoas que estavam na mesa tinham aproximadamente 25 anos de idade. Os dois aí da conversa devem ter ultrapassado os 30. Será que isso é problema de pessoa mais velha?
Será que só porque a pessoa é mais velha ela tem o direito de não acompanhar a evolução da Web?

Não é possível. Conheço pessoas com mais de 30 anos que sabem, e sabem muito, os Padrões Web, JavaScript Cross-browser, Acessibilidade, e o quanto é importante tudo isso.

Não sei no que deu o final da história. O fone de ouvido e as pesadas músicas do System of a Down me salvaram de ouvir o resto. Mas acredito que gambiarras virão para que o site funcione pelo menos no Firefox.

Muitos desenvolvedores possuem medo (ou será preconceito?) quando alguém lhe diz que precisarão desenvolver algo em Client-Side.

Recentemente, o Elcio e eu participamos de um projeto que não tinha nenhuma linha de código Server-Side (PHP, Python, Ruby, etc), era puro JavaScript.

Sim, sabemos que não podemos prender o usuário ao JavaScript. Sabemos que devemos permitir que o usuário navegue pelo site mesmo se ele não estiver com o JavaScript habilitado no navegador dele. Mas não podemos ser radicais. Existem alguns casos que permitem o desenvolvedor não se preocupar com questões de Acessibilidade e JavaScript Não-Obstrutivo, esse era o nosso caso.

Com a combinação de AJAX, DOM e JSON podemos fazer coisas incríveis sem precisar, na maioria das vezes, de uma linguagem Server-Side. Veja como exemplo o Wallpapr, uma aplicação desenvolvida pelo Marco Gomes utilizando o framework jQuery e sem nenhuma linguagem Server-Side.

Assim que comecei a ouvir falar do framework jQuery comecei a estudá-lo e estou ficando cada vez mais curioso em aprendê-lo, mas até agora não consegui fazer testes reais. Por isso irei escrever uma série de posts falando sobre a utilização do jQuery, desenvolvimento de JavaScript Orientado à Objetos e JSON, muito JSON.

Até o próximo post!