Site Overlay

Mensagem de erro em formulário mobile

Mensagens de ajuda são importantes no contexto de qualquer tipo de formulário, porém temos um outro tipo de mensagem a exibi: mensagens de erros e de validações. Não pretendo entrar em detalhes em como tais validações devem ser feitas (seja utilizando JavaScript no navegador ou processando isso com a sua linguagem de programação preferida como Ruby, Python ou Java em um servidor externo), mas sempre devemos guardar um espaço para tais mensagens e definir um estilo específico para elas.

Vamos simular que o formulário foi enviado sem o campo “E-mail” e devemos notificar o usuário disso. Começamos com um elemento span com a classe error, para identificar exatamente quais elementos span estão exibindo tais mensagens.

<p>

<label for=’email’>E-mail:</label>

<input type=’email’ id=’email’>

<span class=’hint’>por exemplo, seunome@dominio.com.</span>

<span class=’error’>Preencha o seu e-mail corretamente.</span>

</p>

Vamos posicionar a mensagem exatamente abaixo do input.

.error {

color: red;

display: block;

font-size: 0.8em;

font-style: italic;

margin: 5px 0 0 90px;

}

O valor block na propriedade display vai garantir que o elemento fique abaixo dos demais, do label, input e o outro span. Os valores de margem posicionam este span abaixo da caixa de texto, com 5px de distância entre eles. A cor vermelha e o texto em itálico (graças ao font-style), garantem um certo destaque em relação ao outros elementos que estão em tons de preto e cinza.

Agora basta replicar o mesmo exemplo para os outros campos do formulário – “Assunto” e “Mensagem”, garantindo o espaço reservado para suas mensagens de erro de validações!

Dessa maneira, bastaria que quando a validação fosse feita, seja no lado do servidor ou no lado do cliente, houvesse uma regra para deixar esse novo span visível quando acontece o erro de validação.

10

Source: scriptcase / Mensagem de erro em formulário mobile

Comments

comments

Leave a Reply

Your email address will not be published.