Validação Formulario - Mensagens de Erro

[pinguimroot 0]

Olá amigos,

 

Como faço para deixar uma validação de um formulário usando css, onde a mensagens abre espaço entre os campos (movendo um pouco os campo para exibir as mensagens)? Igual ao login do Gmail.

 

Obrigado.

[stromdh 15]

cara, não lembro como é a mensagem de erro do gmail, mas tu pode fazer uma validação simplesmente com html5 usando pattern.

 

Abaixo eu postei dois códigos pra tu testar. Pode brincar com css neles.

<!-- campo para email -->
<input type="email" required="required" class="input-text" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" />

<!-- campo para nome, apenas letras -->
<input type="text" required="required" name="text" pattern="[a-z\s]+$" />

[pinguimroot 0]

stromdh valeu pela dica.

 

mas já testei este método e como não fica uma layout padrão em diferentes navegadores estou optando por fazer uma forma que apareça igual em todos os navegadores.