Formulários Ajax Web 2.0 Style

Download: Web 2.0 Forms

Demo: http://www.stoutlabs.com/demos/formMagic_1.htm

Aumentar caixas de texto

Source: http://ejectmedia.net/examples/moo_textareas/

Formulários de Login

Download: http://joeabiraad.com/ajax/ajax-login-form-php-javascript/89
Demo: http://joeabiraad.com/demos/ajax2/

Calendários

Source: http://www.electricprism.com/aeron/calendar/

Validação de formulários

Source: http://www.phatfusion.net/validate/

Personalização de elementos de formulários

Source: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

Selecção múltipla

Source: http://www.wollzelle.com/os/multiple-select-widget/

iMask

Source: http://zendold.lojcomm.com.br/imask/

Auto Completion

Source: http://devthought.com/textboxlist-meets-autocompletion/

O código que se segue é bastante básico portanto se algum especialista em javascript quiser ajudar a criar um código igualmente simples e eficaz com uma estrutura melhor eu agradeço.

<SCRIPT>
function validate() {
var nome=form1.nome.value;
var empresa=form1.empresa.value;
var telefone=form1.telefone.value;
if (nome=='') {
alert('O seu Nome é um campo obrigatório');
return false;
}
if (empresa=='') {
alert('Por favor indique qual a Empresa');
return false;
}
if (telefone=='') {
alert('O campo Telefone é um campo obrigatório');
return false;
}
}
</SCRIPT>


Na primeira parte declaro variáveis caso tenha de adicionar mais código para trabalhar com o valor dos campos. A seguir faço a comparação caso os campos estejam vazios lança o alerta.
De forma a tornar o formulário mais coeso deveria verificar também se os campos não tiverem um determinado numero de caracteres para não validar.
Por agora este código chega para o que pretendo que é lançar um alert caso o cliente não preencha os campos obrigatórios.

Agora de forma a que o formulário não processe antes de verificar se os campos obrigatórios estão preenchidos é necessário antes da action declarar o seguinte:

onsubmit="return validate();"

Assim quando o formulário for submetido primeiro chama a função validate().
Como podes ver o código é relativamente simples, pode ser melhorado em vários aspectos e adaptados como verificar se o telefone possui apenas valores numéricos, se o nome ou empresa não tem espaços apenas para não ficarem vazios e se têm mais de 1 ou 2 caracteres, etc…

Ficam as sugestões para melhorares o código e caso o faças, partilha-o comigo.

Caso queiras aprender mais sobre JavaScript aconselho-te por começares a ler o tutorial de javascript da w3Schools

Grey Wyvern criou um teclado virtual em JavaScript bastante interessante.

Instalação

A sua instalação é relativamente simples:

1. Faz download do código (Copy/Paste) para um ficheiro e chama esse ficheiro keyboard.js
2. Copia o código CSS e guarda-o num ficheiro que poderá ser keyboard.css
3. Coloca esses ficheiros online
4. Insere o seguinte código dentro da HEAD da página onde queres que apareça o teclado:

   <script type="text/javascript" src="keyboard.js" charset="UTF-8"></script>
<link rel="stylesheet" type="text/css" href="keyboard.css">


   Nota: Este código assume que os ficheiros estão na mesma directoria que a página.

5. Para definir qual o campo de input onde o teclado deverá actuar basta atribuir a class keywboard:

   <input type="text" value="" class="keyboardInput">

» Javascript Graphical / Virtual Keyboard Interface

Breve descrição

A secção extensível é composta por 2 partes:

1. O cabeçalho
2. O conteúdo

O cabeçalho

O cabeçalho é composto por um <span> e por uma de cabeçalho (h2) que ambos serão estilizados com CSS.
Ao clicar no cabeçalho irá mostrar ou ocultar o conteúdo.

O conteúdo

O conteúdo terá um texto de exemplo e um link que permitirá ocultar todo o conteúdo.

Primeiro Passo, o código HTML:

O link chama uma função em javascript chamada cabracega que mostra ou oculta o conteúdo do div com a ID de noticias. Este código pode ser usado para mais de uma secção extensível. Para tal basta atribuir nomes diferentes as secções. (noticias1, noticias2, noticias3…)
Caso contrário poderá causar algum conflito.

Segundo Passo: Código CSS

Terceiro Passo: Código Javascript

O JavaScript vai buscar a ID da secção através de um link:

Resultado final