jQuery Plugin Plus Validate

O Plus Validate é Plugin jQuery que valida campos de um modo simples e objetivo.

Segue avaliação: DEMO

Navegadores: IE7+ / FF4+ / Chrome / Safari / Opera

Veja também no site oficial do jQuery:
http://plugins.jquery.com/project/plusvalidate

Com esse plugin você pode validar:
– Se o campo for vazio:
– O mínimo de caracteres para esse campo e colocando uma mensagem de alerta:
– Forçar o usuário a digitar se o campo tem só números:
– Verificar se o E-mail é um endereço eletrônico.

Pra chamar a função identifique primeiro o ID do formulário que irá ser utilizado.

$("#meu_formulario").plusvalidate();

Dentro da função .plusvalidate(); você passa os parâmetros necessario. Vamos ver um exemplo:

$(function(){
    $("#meu_formulario").plusvalidate({
        animation: {
            type : "alert"
        },

        cname: {
            message: "Preencha o campo Nome"
        },

        cemail: {
            message: "Preencha o campo Email",
            required: "email",
            requiredMessage: "Esse campo precisa ter um email eletronico"
        }
    });
});

Segue o HTML

<form id="meu_formulario">
    <p>
        <label>Nome</label>
        <input type="text" name="cname" />
    <p>
        <label>E-Mail</label>
        <input type="text" name="cemail" />
    </p>
    <p>
        <label>Comentário</label>
        <textarea name="comment"></textarea>
    </p>
    <p><input class="submit" type="submit" value="Submit"/></p>
</form>

 

 

DOCUMENTAÇÃO
1. Para adicionar os campos na validação é simples, basta ter o name do campo desejado e colocar na função, separado por vírgula, logo após o animation

cname: {

},
cemail: {

}

O “cname” e o “cemail” seriam os names dos campos “Nome” e “E-mail” do formulário

1.2. Validar se o campo for vazio: use o “message”:

cname: {
	message: "Preencha o campo Nome"
}

1.3. Use o parâmetro “required” para validar um campo, seguido de uma mensagem usando o “requiredMessage”:

cemail: {
    required: "email",
    requiredMessage: "Esse campo precisa ter um email eletronico"
}

OBS: O parâmetro “required” pode validar os sequintes parâmetros:
– email (Verifica se o e-mail é válido)
– number (Verifica se existem só números no campo)
– checkbox (Valida se está marcado um checkbox)
– radio (Valida se está marcado um radio)
– textarea (Valida um Textarea)
– select (Valida se está selecionado algum valor no combo)

Ex 1:

ctermos: {
    required: "checkbox",
    requiredMessage: "Você precisa aceitar os termos para continuar"
}

Ex 2:

cnumero: {
    required: "number",
    requiredMessage: "Esse campo só aceita números"
}

1.4. Existem campos que você pode colocar o o mínimo de caracteres desejados, para isso use o parâmetro “min” seguido da mensagem com o “minMessage”:

clogin: {
    min: 3,
	minMessage: "Esse campo não pode ter menos de 3 caracteres"
}

2. Para colocar um estilo de validação no formulário use o parâmetro animation, que recebe o type com 5 tipos:

2.1. type: “alert”
Ativa um alerta comum na página. O alerta passa campo por campo.
Ex:

animation: {
	type : "alert"
}

2.2. type: “allalert”
Ativa um alerta comum na página dizendo todos os campos que estão faltando preencher e tuas devidas propriedades.

animation: {
	type : "allalert"
}

2.3. type: “star”
Mostra um estrela (asterístico) ao lado do campo dentro de uma TAG span com uma classe chamada plusvalidate-star. Você pode mudar o estilo dessa classe através de um CSS comum, um estilo.

animation: {
	type : "star"
}

2.4. type: “allstar”
Segue o mesmo padrão do type: “star”, porém aparecem todas de vez. Também criam um span com classe e pode ser manipulado.

animation: {
	type : "allstar"
}

2.5. type: “animate”
Cria uma animação de “balanço” nos campos e deixa uma borda sinalizando o alerta. É a única validação que passa outros parâmetros, de cor da borda e de velocidade da animação. Não é obrigatório pois já vem como default a cor “#F00” (vermelho) e velocidade “50
Ex:

animation: {
	type : "animate",
    color: "#369",
    duraction: 100
}

OBS: O duraction seria igual ao jQuery, pode usar acima de 10 para melhor efeito.
OBS: O campo de select não cria efeito e nem marca. (disponíveis agora na versão 1.1) Os campos de checkbox e de radio não marcam, mais criam o efeito.

Segue abaixo um completo: DEMO
Faça o DOWNLOAD do Plugin 1.1.

DOWNLOAD do Plus Validate Versão: 1.1
Minified e Uncompressed Code

DOWNLOAD do Plus Validate Versão: 1.0
Minified e Uncompressed Code

Veja também no site oficial do jQuery:
http://plugins.jquery.com/project/plusvalidate

Navegadores: IE7+ / FF4+ / Chrome / Safari / Opera

Agência OFF, desenvolvimento de soluções web para as Agências Digitais

programador javascript em salvador bahia, programador javascript na bahia, front-end salvador bahia, montagem sites salvador bahia

Usabilidade em Códigos

Fiz um artigo para a Faculdade e decidir compartilhar aqui também algumas dicas:
Link oficial: Aqui!

O código é a engenharia completa de um site, sem ele não existe site, isso é um fato!
Ter um código limpo, não é necessariamente, ter um site 100% rodando sem erros, até porque, o erro não precisa ser “visualmente” constatado.

Mesmo que seu site seja homologado muitas vezes por você mesmo, sempre passa alguma coisa que sua mente cansada não visualizou, ou simplesmente, deixou para resolver o tal erro, mais tarde e no final, não resolveu.
Use a cabeça, quer dizer, use mais mentes a seu favor. Fazer testes de estresses (que é forçar os erros acontecerem) no seu código ajuda a sanar os erros que restaram, mais não quer dizer que foram todos resolvidos.

Pessoas que nunca visualizaram seu site ou seu código podem ajudar nessa tarefa. Veja algumas coisas que nunca poderão acontecer em seu site:

1. Já imaginou um usuário entrar em um site, e clicar em um link que não vai para lugar nenhum? Complicado isso, é estressante! Para que tem a tal da “mãozinha” se não te leva a lugar algum?

2. Site que demora de carregar. Isso realmente mata. Você acha que é pouco tempo, mais para o usuário esperar mais de 10 segundos para seu site carregar, é uma eternidade. Otimize seu código, suas imagens, e o conteúdo do texto pode também ser otimizado. Pense nisso!

3. Tipografia! O que é isso? São as fontes usadas em seu site. Certo! Fontes? Não use tantas fontes em seu site, duas no máximo, para que ter um carnaval de fontes de vários tipos e de vários tamanhos? Foque na usabilidade.

4. Formulários. Essa palavra realmente desanima seu usuário. Nome, e-mail, telefone, celular, CPF, endereço, bairro, cidade, estado… Nossa! Quanta coisa! Você mesmo iria preencher isso tudo? Otimize esses campos. O usuário odeia digitar muito, somos preguiçosos na internet, não podemos gastar muito tempo.

Essas dicas podem te ajudar a ter um código mais limpo e ter uma boa usabilidade em seu site. Pesquise mais sobre usabilidade, as empresas hoje em dia procuram profissionais que tenham uma mente aberta para customizar sites antigos!

Agência OFF, desenvolvimento de soluções web para as Agências Digitais

programador javascript em salvador bahia, programador javascript na bahia, front-end salvador bahia, montagem sites salvador bahia

Bloquei o IE6 em seu site de forma simples com JavaScript e HTML

Uma maneira simples de bloquear o Internet Explorer 6 para não acessar teu site é usando JavaScript!

Em todas as páginas adicione o seguinte código dentro da tag head:

<!--&#91;if IE 6&#93;>
<script type="text/javascript">window.location.href = "atualize-navegador.html";</script>
<!&#91;endif&#93;-->

Adicionei uma página chamada atualize-navegador.html (clique para acessar) para deixar o usuário mais alerta e mostrar o porque ele foi impedido de acessar o site! Sempre deixe o usuário informado!

Segue abaixo o link para o download da página ou você pode colocar o link absoludo para não precisar fazer o download do arquivo!

Clique aqui para baixar

Clique aqui para ver a página!

Agência OFF, desenvolvimento de soluções web para as Agências Digitais

programador javascript em salvador bahia, programador javascript na bahia, front-end salvador bahia, montagem sites salvador bahia

jQuery Lightbox Clone

Imagem do Lightbox

Script que chama o pretty photo.

$(document).ready(function(){
	$(".class-galeria a[rel^='lightbox']").prettyPhoto({theme:"dark_rounded"});
});

Mais antes exite o arquivo que completa a janela: jquery.pretty-photo.js

O script completo fica assim:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" charset="utf-8">
	google.load("jquery", "1.3");
</script>
<script type="text/javascript" src="js/pretty-photo/jquery.pretty-photo.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$(".class-galeria a[rel^='lightbox']").prettyPhoto({theme:"dark_rounded"});
});
</script>

Existe ainda o arquivo de configuração do css que é indispensável para a jenela.

Script demo para visualização: CLIQUE AQUI

Script completo: CLIQUE AQUI

Agência OFF, desenvolvimento de soluções web para as Agências Digitais

programador javascript em salvador bahia, programador javascript na bahia, front-end salvador bahia, montagem sites salvador bahia

z-index com jQuery Galeria funcional

Script:

$(document).ready(function(){
  var z = 0;
  var inAnimation = false;
  
  $("#fotos img").each(function(){
    z++;
    $(this).css("z-index", z);
  });

  function swapFirstLast(isFirst){
    if(inAnimation) return false;
    else inAnimation = true;
	
    var processZindex, direction, newZindex, inDeCrease;
    
    if(isFirst){
		processZindex = z; direction = "-"; newZindex = 1; inDeCrease = 1;
	}
    else {
		processZindex = 1; direction = "-"; newZindex = z; inDeCrease = -1;
	}
    
    $("#fotos img").each(function(){
      if($(this).css("z-index") == processZindex){
        $(this).animate({"top" : direction + $(this).height() + "px"}, "slow", function(){
          $(this).css("z-index", newZindex)
            .animate({"top" : "0"}, "slow", function(){
              inAnimation = false;
            });
        });
      } else {
        $(this).animate({"top" : "0"}, "slow", function(){
          $(this).css("z-index", parseInt($(this).css("z-index")) + inDeCrease);
        });
      }
    });
    return false;
  }
  
  $("#proximo a").click(function(){
    return swapFirstLast(true);
  });
  
  $("#anterior a").click(function(){
    return swapFirstLast(false);
  });
});

Script Completo CLIQUE AQUI

Agência OFF, desenvolvimento de soluções web para as Agências Digitais

programador javascript em salvador bahia, programador javascript na bahia, front-end salvador bahia, montagem sites salvador bahia

Carregando o jQuery das APIs AJAX do Google.

Para suas aplicações ficarem sempre atualizadas utilize as APIs AJAX do Google para isso! E como fazer da maneira mais fácil e ainda deixar o código limpo?

Vamos lá para a resposta.

Primeiro vamos para a definição do Google para isso!
A API AJAX de bibliotecas é uma rede de distribuição de conteúdo e arquitetura de carregamento das bibliotecas JavaScript de código aberto mais populares.

As APIs AJAX do Google trabalham com variadas bibliotecas como citado acima, segue uma delas:

Dentre outras…

Para a nossa aplicação vamos usar o jQuery.
Primeiro carregamos o jQuery e logo em seguida a função google.load() com o nome do jQuery e a versão.

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
	google.load("jquery", "1.3.2");
</script>

Logo depois você joga a função ou script de jQuery que deseja chamar

Para o jQuery temos as seguintes versões:
versões: 1.2.3, 1.2.6, 1.3.0, 1.3.1, 1.3.2

Para cada versão você também pode usar a uncompressed fazendo assim no script

<script type="text/javascript">
	google.load("jquery", "1.3.2", {uncompressed:true});
</script>

O google dar a seguinte informações para os usuários do jQuery:
Nas versões 1.2.5 e 1.2.4 não são hospedadas devido aos seus curtos e instáveis ciclos de vida.

Mais informações acesse o site do jQuery Google para isso:

Uma observação para isso bem interessante e fundamental:
Se os servidores do Google sair do ar, o pior acontece hehe!

Abraços a todos!

Agência OFF, desenvolvimento de soluções web para as Agências Digitais

programador javascript em salvador bahia, programador javascript na bahia, front-end salvador bahia, montagem sites salvador bahia

Trocando o texto quando dar foco em campo

Script simples:

<script type="text/javascript">
function limpar(campo){
	if (campo.value == campo.defaultValue){
		campo.value = "";
	}
}

function escrever(campo){
	if (campo.value == ""){
		campo.value = campo.defaultValue;
	}
}
</script>

Como ficará no campo de texto:

<input type="text" name="nome_campo" id="nome_campo" value="Clique Aqui para o texto sair!" onfocus="limpar(this);" onblur="escrever(this);" />

Veja o Script rodando: CLIQUE AQUI

Agência OFF, desenvolvimento de soluções web para as Agências Digitais

programador javascript em salvador bahia, programador javascript na bahia, front-end salvador bahia, montagem sites salvador bahia

Comparando Datas com JavaScript

<script language="javascript">    
function checarDatas(){
    var NomeForm = document.Formulario;
    
    var data_1 = NomeForm.data_01.value;
    var data_2 = NomeForm.data_02.value;
    var Compara01 = parseInt(data_1.split("/")[2].toString() + data_1.split("/")[1].toString() + data_1.split("/")[0].toString());
    var Compara02 = parseInt(data_2.split("/")[2].toString() + data_2.split("/")[1].toString() + data_2.split("/")[0].toString());

    if (Compara01 > Compara02) {
        document.getElementById("resultado").innerHTML = "Data do Campo 01 Maior";
    }
    else {
          document.getElementById("resultado").innerHTML = "Data do Campo 01 Menor";
    }
    return false;
}
</script>
<div id="resultado"></div>
<form method="post" action="Teste.pl" name="Formulario" onsubmit="return checarDatas()">
    campo01: <input type="text" id="data_01" /><br />
    campo02: <input type="text" id="data_02" />
<input type="submit" />
</form>

 

Acesse também a Webly

Agência OFF, desenvolvimento de soluções web para as Agências Digitais

programador javascript em salvador bahia, programador javascript na bahia, front-end salvador bahia, montagem sites salvador bahia