Validação de formulários com Jquery, uma abordagem simples… | Parte 2

Confira um exemplo de implementação de validação de formulário simples com html, css e jQuery.

Oi pessoal, semana passada publiquei aqui no blog a primeira parte deste tutorial sobre a validação de formulários utilizando html, css e jQuery.

Como eu expliquei na semana passada utilizo uma lógica simples baseada em 3 princípios:

  • As mensagens de erro são inclusas no html e ocultas via css
  • Quando algum critério não é atendido o contador de erros é aumentado em um e a mensagem é exibida
  • Caso não exista nenhum erro o formulário é postado

O arquivo CSS

Em nosso arquivo css temos o estilo das mensagens de erro que serão exibidas em vermelho abaixo dos inputs.

Confira o código abaixo:

O arquivo JS

O arquivo JS é responsável por controlar o fluxo da aplicação e possui uma lógica bem simples que segue o fluxo:

  • Inicia o contador de erros em zero
  • Valida se o nome esta vazio
  • Valida se o email esta vazio
  • Valida se a senha esta vazia
  • Valida se a senha confere com a confirmação de senha
  • Caso qualquer validação esteja incorreta aumenta 1 no contador de erros
  • Caso o contador de erros seja igual a zero posta o formulario

Para validar e invalidar campos utiliza as funções setValid e setInvalid que você pode ver abaixo

As funções setValid e setInvalid

São as funções responsáveis por alterar os inputs para verde ou vermelho de acordo com a situação do input.

Veja as funções abaixo:

É isso pessoal espero que tenha ficado clara a mecânica para validação de formulários com jQuery e CSS. Essa base pode ser utilizada para quase qualquer situação, adicionando novas validações como formatos de CPF, Email etc, até validações de back-end que utilizam o Ajax do Jquery, mas isso é assunto para os próximos posts…

 

Validação de formulários com Jquery, uma abordagem simples… | Parte 1

Saiba mais sobre Validação de formulários de uma forma simples e elegante sem complicar seu código.

Bom dia pessoal, hoje é terça-feira dia de falar de código aqui no blog e colocar a mão na massa, hoje vou  abordar um assunto que apesar de ser básico no desenvolvimento web: Validação de formulários,porém ainda gera muitas dúvidas e dor de cabeça para os desenvolvedores, principalmente os iniciantes, a validação de dados em formulários.

Nesses mais de 10 anos na área já vi todo tipo de validação, com JS, no Backend, Híbrida e feita das formas mais entranhas possíveis. Bom, depois de penar bastante com esse assunto consegui definir um padrão para o meu desenvolvimento que facilitou muito a minha vida, o modelo é baseado em Jquery, Html e css puros e se necessário alguma validação de banco de dados utilizo um script de back end.

A construção do HTML

Como minha Validação de formulários é baseada apenas em HTML, Js e Css, o primeiro passo é a construção do html, nesse exemplo do artigo vamos construir um formulário bem simples para cadastro de nome, cpf, e-mail e senha com um campo para confirmação da senha, veja o exemplo de construção do html abaixo:

 

Como você pode ver no exemplo acima, cada campo é composto de 3 elementos a label ou nome do campo, o campo efetivamente através do elemento input e uma mensagem de erro que é inserida dentro do elemento span.

A lógica de validação

A lógica para validação exibição de erros e efetiva postagem dos dados seguem algumas premissas simples:

  • O texto das mensagens de erro constantes nos elementos SPAN com a class erro são ocultas inicialmente
  • Quando algum critério de validação não é respeitado a mensagem é exibida
  • Caso não exista nenhum erro o formulário é postado

Esses são o 3 princípios utilizados nessa validação, no próximo artigo vou trazer para vocês o exemplo do css e do script Jquery responsável pela validação.

Até a próxima!

Leaf, o meu substituto para o Reeader

Leaf

Bom dia pessoal, segunda feira, dia de trazer dicas de software aqui no blog. Quem me conhece sabe que sou um grande fã da tecnologia RSS, e confesso que nos últimos anos essa foi a minha forma preferida de consumir notícias, mais especificamente utilizando o aplicativo Reeader, que não vou nem linkar aqui, integrado ao Google Reader.

Porém como vocês sabe o Google com toda a sua “sabedoria” resolveu matar o Google Reader no mês passado e acabou me deixando na mão assim como milhares de usuários, pra melhorar um pouco o Reeder meu client preferido e que eu já havia comprado no Mac no Ipad e no Iphone, não vai ser corrigido 😐

Bom esse cenário, me fez buscar novas opções para continuar lendo os feeds dos meus sites preferidos, e nessa busca, testando algumas opções optei pelo Leaf.

Simples e direto

O Leaf é um leitor simples se comparado ao Reeder porém extremamente bem desenhado e focado no que interessa, consumir conteúdo.

Como destaques do Leaf coloco além do design, a integração com o sistema de notificações do OSx, o que facilita o acompanhamento dos feeds além da abertura direta de arquivos de RSS.

O Aplicativo ainda conta com algumas opções de compartilhamento integradas ao sistema e que facilitam a vida.

Veja no vídeo abaixo um pouco mais sobre o funcionamento do Leaf:

No geral o Leaf consegue atender ao que se propõe mas ainda esta longe do conforto que era proporcionado pela dupla anterior, em todo caso passou a ser minha opção.

E você fã de RSS o que fez com a morte do Google Reader?

Sublime Text 3, primeiras impressões.

Conheça algumas das novidades da versão 3 do Sublime Text, o melhor editor de código já criado, eu testei e gostei, mas ainda não é hora de migrar

Bom dia pessoal, como vocês já sabem eu sou um grande fã do Sublime Text, editor de texto que na minha opinião é a melhor opção existente para profissionais que trabalham com desenvolvimento para web, e depois de muito tempo foi lançada a versão 3 do editor e que ainda esta em beta, porém bem estável e com algumas novidades que vou destacar abaixo…

Auto-completar

Muitos comportamentos que antes eram possíveis apenas através do Emmet, agora se tornaram nativos do editor, veja no vídeo abaixo alguns exemplos na prática em um arquivo html.

 

Novo sistema de auto update para Windows 

Pra quem utiliza o editor no Windows agora essa versão conta com o mesmo auto-updater que já era disponibilizado na versão para OSX

Aumento da velocidade

Quem já conhece o Sublime, sabe que o seu ponto forte esta justamente na velocidade, e mesmo assim a nova versão consegue ser ainda mais rápida mesmo na utilização de múltiplos painéis como você pode ver no exemplo abaixo:

 

Além disso foram implementadas dezenas de melhorias além da disponibilização da API em Python que permite aos desenvolvedores criar dezenas de plugins

Package Manager

Porém quem utiliza o Sublime sabe que boa parte de seu poder de fogo está no package manager e em sua centenas de plugins e como não poderia ser diferente o Sublime Text 3 já possui o seu package manager, porém a versão é ALPHA e a instalação nada simples como você pode verificar aqui http://wbond.net/sublime_packages/package_control/installation#ST3

Resumo da Ópera

O SublimeText 3 vai manter toda a simplicidade que tornou o editor uma ferramenta indispensável, porém ainda não é hora do Upgrade, com a incompatibilidade de pacotes de problemas ainda existentes no package manager recomendo esperar a versão final para começar a pensar em atualizar

Até a próxima!

Você sabe o que é o 4 de Julho?

Saiba o que significa o 4 de julho, essa data tão importante para os americanos

Bom dia leitores, hoje quero trazer um pouco de história aqui no blog, afinal hoje é 4 de julho, feriado nos Estados Unidos e uma das data mais comemorados na maior potência do mundo.

O 4 de julho de já deu nome e inspirou diversos filmes, veja a lista abaixo que foi divulgada pela Readers Digest:

1. The Patriot
2. Born on the Fourth of July
3. The Devil’s Disciple
4. John Adams
5. Drums Along the Mohawk
6. Johnny Tremain
7. The Crossing
8. John Paul Jones
9. 1776

Fonte:  http://www.rd.com/advice/top-9-movies-featuring-the-4th-of-july/#ixzz2Y5McL5cV

Mas afinal o que é o 4 de julho?

Em 4 de julho de de 1776 foi declarada a independência dos Estados Unidos da América que na época era formado por 13 colônias pertencentes ao Reino Unido (Inglaterra), e a partir desse momento surgiu o país que viria a liderar o mundo nos séculos seguintes e se tornar a potência que é hoje em dia.

A algum tempo atrás o canal History Channel  exibiu duas séries de documentários que ilustram bem como esse processo aconteceu e como o país conseguiu se transformar no que é hoje, a primeira é America: The story of us e a segunda é a The men who build the America, apresentada no Brasil como gigantes da indústria :s

Ambas valem muito a pena para quem quer conhecer um pouco mais sobre a história dos estados unidos e podem ser facilmente encontradas na internet, veja abaixo alguns vídeos das séries.

É isso essa é minha pequena homenagem a nação que moveu o mundo nos últimos séculos e que hoje esta em festa, até a próxima.

Como ordernar uma consulta MySql de forma pré-definida?

Saiba como realizar consultas no Mysql mantendo uma ordem pré-definida para os resultados apresentados

Bom dia hoje é terça-feira dia de colocar a mão na massa aqui no blog, trazendo dicas para facilitar o dia a dia dos desenvolvedores web mas antes da dica de hoje aproveite para ler algumas dicas que já trouxe por aqui:

Mas vamos a dica do dia )) como realizar consultas no Mysql com ordenação de resultado pré-definida, mas por quê isso?

Bom em um dos últimos jobs que realizei precisei fazer uma consulta que retorna-se os dados na ordem abaixo:

Resultado de consulta Mysql

Como você pode ver a ordenação não segue uma lógica por nenhum dos dois campos, nem crescente nem decrescente, eu preciso de uma ordenação fixa (3,2,4,1) como fazer?

Sem utilizar a ordenação  o resultado seria:

Consulta sem ordenação
Consulta sem ordenação

Porém não conseguia chegar a uma forma simples de realizar tal tarefa até que descobri o o parâmetro order by field, com ele você pode definir a ordem que os resultados serão retornados utilizados para isso qualquer uma das colunas da tabelaveja o mesmo exemplo:

Order by field
select * from usuario order by field(id,3,2,4,1)

Simples, porém eu não conhecia essa propriedade do SQL utilizado no Mysql e passei um bom tempo procurando a solução, tempo esse que espero que você não precise gastar se encontrar esse post antes 🙂

É isso hoje a dica foi simples mas objetiva, até a próxima com mais dicas sobre desenvolvimento!
 

Aumente sua produtividade no Mac com Alfred

Saiba como o Alfred App vai mudar a forma como você usa o Mac Os e aumentar sua produtividade.

Olá pessoal, segunda-feira, boa semana a todos, e para começar a semana vamos a uma dica que vai aumentar muito a sua produtividade no dia a dia com o Mac Os X, mas antes dê uma olhada nas dicas de produtividade que já passaram por aqui.

Eu já havia falada aqui algum tempo atras sobre ferramentas indispensáveis para quem trabalha com desenvolvimento de software, mas a dica de de hoje aplica a qualquer área, basta que você seja usuário de Mac Os X.

Trata-se do Alfred um aplicativo leve e gratuíto que vai turbinar sua produtividade no Mac, para instalar o App sigas os passos:

Como instalar o Alfred App

  1. Acesse http://www.alfredapp.com/
  2. Clique em Download
  3. Baixe o Zip descompacte e faça a instalação

O que o Alfred faz?

Segundo a definição do desenvolvedor “Alfred saves you time when you search for files online or on your Mac. Be more productive with hotkeys, keywords and file actions at your fingertips.” ou seja Alfred economiza seu tempo quando você procura arquivos online ou em seu mac.

Mas como diria a Polishop, não é só isso,  com o Alfred você pode criar Hotkeys, que são atalhos universais para programas, arquivos, fluxos de trabalho e até scripts do Automator, como o que eu trouxe a alguns dias atrás.

Além disso você tem dezenas de outras pequenas funcionalidades que vão fazer você produzir “like a pro” como:

  • Abrir aplicações
  • Busca na Web
  • Calculadora
  • Snippets
  • Itunes Mini Player
  • Integração com o 1Password (Essa é genial)

Veja no vídeo abaixo um pouco do que eu estou falando:

Veja alguns prints:

 Itunes mini player
Itunes mini player
Busca de Aplicações
Busca de Aplicações

É isso pessoal, na próxima semana vou explicar sobre como criar hotkeys e fluxos de trabalho com o Alfred para aumentar mais ainda a sua produtividade, até a próxima.

Instagram agora suporta vídeos

Instagram com vídeos, era o “mistério” do Facebook anunciado na tarde de hoje, nada como a concorrência, não é Vine

Depois de um baita mistério e de convocar uma coletiva de imprensa prometendo uma grande novidade o Facebook acaba de anunciar a poucos minutos a sua grande novidade, vídeos no Instagram, é isso mesmo eles convocaram a imprensa pra isso…

Bom de toda forma alguns detalhes sobre o anúncio:

  • Até 15 segundos de vídeo
  • 30 efeitos diferentes
  • Disponibilidade dos vídeos na Web, no iOs e no Android
  • Possibilidade de escolher a capa/thumb do vídeo
  • Estabilizador de filmagem

Segundo o anúncio, o estabilizador Cinema irá revolucionar os vídeos na web, simplemente por que vai reduzir o treme-treme nas filmages

É isso, eles poderiam ter anunciado isso no changelog do App mas nada como ter a atenção da mídia!

Você já ouviu falar da Anki? Inteligência Artificial Aplicada!

Conheça a Anki, empresa que esta aplicando Inteligência Artificial com iOs devices na vida real.

Hoje é quarta-feira, dia de falar de inteligência artificial por aqui, então vamos lá!

No keynote de abertura da WWDC 2013desta última segunda feira tive a grata surpresa de ver a apresentação de uma empresa da Califórnia chamada Anki que teve a honra de apresentar seu primeiro produto no evento de abertura do principal evento da Apple.

Trata-se de uma start-up iniciada na universidade de Carnegie Melon focada em Inteligência Artificial e Machine Learning, que utilizando as tecnologias Apple em conjunto com a iOs sdk tem criado pequenas maravilhas.

Na apresentação desta segunda eles falaram sobre o Anki Drive um “game” de corrida “for real” com carrinhos de verdade e tudo mais, com uma inteligência sensacional vale a pena conferir no vídeo abaixo:

Como você pode ver, é video game da vida real, e tenho certeza que nos próximos anos ouviremos falar muito dessa empresa e dessa aplicação da Inteligência Artificial e games e robôs que farão parte cada vez mais do nosso dia a dia.

Para saber mais sobre a empresa e sobre a tecnologia por trás do Anki Drive, acesse http://anki.com até semana que vem com mais sobre IA

Como liberar espaço em disco no Mac Os?

Saiba como liberar espaço em disco em máquinas que rodam o sistema operacional da Apple

Bom dia pessoal, hoje quero trazer para vocês uma dica que tive que aprender na marra nos últimos dois dias. Como alguns sabem utilizo no meu dia a dia um Macbook Air como máquina principal, é uma máquina ótimo com um único porém o espaço em disco é muito reduzido devido ao custo alto de discos SSD.

Utilizo essa máquina todos os dias a mais de um ano e este fim de semana recebe o alerta que o disco de 128 GB tinha apenas 1 GB livre e eu deveria tomas atitudes antes que a maquina trava-se.

Bom fiz aquelas limpezas naturais:

  • Apagar aplicativos que não uso
  • Remover fotos
  • Remover músicas do iTunes (Mantendo apenas no iCloud)
  • Apagar arquvios de pouco uso
  • Ativar o sinc seletivo no Dropbox

Porém fazendo tudo isso liberei apenas 20 gb de espaço, e não conseguia entende aonde estavam sendo utilizados os 100Gb restantes do disco, devido a isso comecei a buscar no sistema formas de ganhar mais espaço, e descobri duas coisas interessantes que não sabia e agora compartilho com vocês.

[O CHROME ESTAVA COM MAIS DE 3GB]

Quando fui analisar o tamanho dos softwares que utilizo descobri que o Chrome tinha mais de 3GB o que não tem nenhuma lógica, analisando os arquivos que compõem o browser descobri, ele salva todas as versões antigas dele mesmo após as atualizações, ou seja, eu tinha todos os releases do Chrome de 1 ano na máquina.

Para resolver isso existem duas soluções:
1 – Remover o Chrome e reinstalar
2 – Em aplicações clique com o direito sobre o Chrome e clique em Show Package Contents, feito isso abra a pasta Contents > Versions e apague todas as versões antigas.

[O SISTEMA TINHA 50 GB DE LOGS]

É isso mesmo o Montain Lion estava armazenando mais de 50gb de arquivos de LOG o que consome quase metade do disco.

Bom para remover esses arquivos confesso que penei um pouco, pois simplesmente deletar os mesmos não resolve, todas as vezes que tentei o sistema ficou instavel e travou.

Para resolver isso encontrei um software chamado Onix que você pode baixar aqui com ele é bem simples selecionar os arquivos de log que deseja remover e assim liberar espaço em disco!

É isso espero que as dicas sejam úteis e até a próxima!