Welt Web

Uma das coisas mais “chatinhas” de se fazer, são as benditas validações, principalmente de limitar quantidades de caracteres em um determinado campo.

Isso ficou mais simples usando o um pluggin jQuery, como nessa página de exemplo: DEMO

O seu HTML deve ficar assim:

continuar lendo

Exiba as imagens do seu site de uma maneira diferente e suave com este plugin.

Veja o exemplo

continuar lendo

• blur():jQuery. Dispara o evento blur (perda de foco) para cada elemento selecionado.
• blur(função):jQuery. Associa uma função ao evento blur (perda de foco) para cada elemento selecionado.
• change():jQuery. Dispara o evento change (alteração) para cada elemento selecionado.
• change(função):jQuery. Associa uma função ao evento change (alteração) para cada elemento selecionado.
• click():jQuery. Dispara o evento click (clique) para cada elemento selecionado.
• click(função):jQuery. Associa uma função ao evento click (clique) para cada elemento selecionado.
• dblclick():jQuery. Dispara o evento dblclick (duplo clique) para cada elemento selecionado.
• dblclick(função):jQuery. Associa uma função ao evento dblclick (duplo clique) para cada elemento selecionado.
• error():jQuery. Dispara o evento error (erro) para cada elemento selecionado.
• error(função):jQuery. Associa uma função ao evento error (erro) para cada elemento selecionado.
• focus():jQuery. Dispara o evento focus (foco) para cada elemento selecionado.
• focus(função):jQuery. Associa uma função ao evento focus (foco) para cada elemento selecionado.
• keydown():jQuery. Dispara o evento keydown (pressão sobre uma tecla) para cada elemento selecionado.
• keydown(função):jQuery. Associa uma função ao evento keydown (pressão sobre uma tecla) para cada elemento selecionado.
• keypress():jQuery. Dispara o evento keypress (pressão sobre uma tecla e sua liberação) para cada elemento selecionado.
• keypress(função):jQuery. Associa uma função ao evento keypress (pressão sobre uma tecla e sua liberação) para cada elemento selecionado.
• keyup():jQuery. Dispara o evento keyup (liberação de tecla) para cada elemento selecionado.
• keyup(função):jQuery. Associa uma função ao evento keyup (liberação de tecla) para cada elemento selecionado.
• load(função):jQuery. Associa uma função ao evento load (carregamento) para cada elemento selecionado.
• mousedown(função):jQuery. Associa uma função ao evento mousedown (pressão do botão do mouse) para cada elemento selecionado.
• mouseenter(função):jQuery. Associa uma função ao evento mouseenter (mouse passa a estar sobre um elemento) para cada elemento selecionado.
• mouseleave(função):jQuery. Associa uma função ao evento mouseleave (mouse deixa de estar sobre um elemento) para cada elemento selecionado.
• mousemove(função):jQuery. Associa uma função ao evento mousemove (movimentação do mouse) para cada elemento selecionado.
• mouseout(função):jQuery. Associa uma função ao evento mouseout (mouse deixa de estar sobre um elemento) para cada elemento selecionado. Mouseout dispara quando o ponteiro do mouse “entra” ou “sai” de um elemento-filho, enquanto o mouseleave não.
• mouseover(função):jQuery. Associa uma função ao evento mouseover (mouse passa a estar sobre um elemento) para cada elemento selecionado. Mouseover dispara quando o ponteiro do mouse “entra” ou “sai” de um elemento-filho, enquanto o mouseenter não.
• mouseup(função):jQuery. Associa uma função ao evento mouseup (liberação do botão do mouse) para cada elemento selecionado.
• resize(função):jQuery. Associa uma função ao evento resize (redimensionamento) para cada elemento selecionado.
• scroll(função):jQuery. Associa uma função ao evento scroll (rolagem) para cada elemento selecionado.
• select():jQuery. Dispara o evento select (seleção) para cada elemento selecionado.
• select(função):jQuery. Associa uma função ao evento select (seleção) para cada elemento selecionado.
• submit():jQuery. Dispara o evento submit (envio de dados de formulário) para cada elemento selecionado.
• submit(função):jQuery. Associa uma função ao evento submit (envio de dados de formulário) para cada elemento selecionado.
• unload(função):jQuery. Associa uma função ao evento unload (descarregamento) para cada elemento selecionado.

Existem vários sites, que usam plugins jQuery para álbuns fotográficos, galerias de fotos e imagens em geral, e sempre ficamos limitados a determinados plugins e acabamos nos acostumando e deixando de conhecer novos e interessantes plugins para fotos com jQuery.

O pirobox por exemplo é um plugin diferente e dificilmente visto em sites, porém é facilmente de ser usado e de visual mais sofisticado.

Para conhecer o plugin, clique aqui


<html>
<head>
<title>Validando Campos com jQuery</title>
<script language="javascript" src="javascript/jquery.js"></script>
<script>
$('document').ready(function(){
//no click do botão v os verificar se os campos não estao vazios
//#botao é o id do button do formulario
// .click é o evento do click do botão do formulario
$('#botao').click(function(){
// #nome é nosso id do campo nome
// .val() é uma função do jquery que recupera o valor que existe no campo
var nome = $('#nome').val();
var email = $('#email').val();
//verifica se o campo nome esta vazio
if(nome != ''){
//verifica se o campo email esta vazio
if(email != ''){
//nesta parte pode se chamar o JSON, para algum cadastro ou consulta
}
else{
//alerta na tela que o campo esta vazio
alert('Campo Email obrigatório!!!');
//adiciona um css com as bordas do input vermelhas
$('#email').css('border: 1px solid red');
}
}
else{
//alerta na tela que o campo esta vazio
alert('Campo Nome obrigatório!!!');
//adiciona um css com as bordas do input vermelhas
$('#nome').css('border: 1px solid red');
}
})
})
</script>
</head>
<body>
<form id='fcad' name='fcad' action='' method='post'>
<table>
<tr>
<td>Nome:</td>
<td><input type='text' id='nome' name='nome' /></td>
</tr>
<tr>
<td>Email:</td>
<td><input type='text' id='email' name='email'></td>
</tr>
<tr>
<td colspan='2'><input type='button' id='botao' name='botao' value='Enviar'></td>
</tr>
</table>
</form>
</body>
</html>