Skip Navigation Links
Novas Tecnologias
Ferramentas Adicionais
Ferramentas Adicionais
Validações em HTML 5 : Personalizando as mensagens
Data:3/6/2013

Translate this page now :





Categories: ASP.NET , HTML 5

Gostou do texto ? Vote e dê sua opinião! Pontuação atual :
Adicione aos Favoritos!
BlogBlogs Rec6 Linkk Ueba Technorati Delicious DiggIt! StumbleUpon

Veja Também


 

HTML5Publiquei uma dica sobre como usar o setCustomValidity para personalizar a mensagem de validação exibida automaticamente pelo HTML 5 na validação de formulários.

Isso já é um inicio para a personalização, porém existem situações mais complexas : Podem haver muitas causas para um erro de validação.

Por exemplo : Em um campo definido como numérico, ele pode estar inválido por não ter sido preenchido, pelo número estar abaixo do limite mínimo ou por estar acima do limite máximo. A mensagem, nesse caso, precisa ser personalizada.

Vamos considerar o seguinte campo :

               <input type="number" id="txtnome" required min="10" max="20" oninvalid="javascript:subinvalid(this)"  />

Observe que estou utilizando o evento oninvalid para chamar uma rotina em javascript e passando o próprio campo como parâmetro.

Veja como fica a rotina para personalizar a mensagem de erro :

    <script>

        function subinvalid(sender) {
            sender.setCustomValidity('');

            if (!sender.validity.valid) {
                if (sender.validity.valueMissing)
                    sender.setCustomValidity("Por favor, preencha o valor!");
                if (sender.validity.rangeOverflow)
                    sender.setCustomValidity("O valor pode ser no máximo " + sender.max);
                if (sender.validity.rangeUnderflow)
                    sender.setcCustomValidity("O valor deve ser no mínimo " + sender.min);
                }
        }
     

Através do objeto validity ligado ao próprio campo podemos identificar exatamente que tipo de erro de validação ocorreu e desta forma personalizar a mensagem de acordo com o erro de validação.



Categories: ASP.NET , HTML 5


Nome :
E-mail:
Comentarios :
 
 
Os Últimos Comentários
data: 7/27/2015 9:14:00 PM
nome: a
email: a@a.com
comentário:
a

data: 6/7/2015 6:17:00 PM
nome: William
email: wmn8@ibest.com.br
comentário:
Por que no elemento input o evento oninvalid="javascript:subinvalid(this)" você colocou a palavra "javascript" para chamar a função?

data: 4/11/2015 4:20:00 PM
nome: kjkhk
email: jkhlh@jhghk.com
comentário:
jhjkhlk

data: 7/28/2014 10:00:00 PM
nome: assaas
email: asasas@x.co
comentário:
asasa

data: 3/14/2013 8:22:00 PM
nome: Anonimous
email: anoni@mous.com
comentário:
Recebi a dica por e-mail, mas era para ir para "Nuget x TFS : Access Denied to MainCollection". Acho que precisa corrigir o link do e-mail.

 1  
Dicas
Dica do Dia
Receba Dicas Por Email
E-mail :  
 


 (help)
Aceito receber informativos do devASPNet, informações de eventos e treinamentos

Veja Quais Informativos Você Receberá

Pesquisar Dicas
Pesquisar Artigos, Dicas e Noticias

Banco de Dados
Algumas Entrevistas
Links Importantes

Búfalo Informática, Treinamento e Consultoria
R. Alvaro Alvim, 37/920 Centro - Cinelândia - Rio de Janeiro Cep: 20031-010
Tel : (21) 2262-1368 (21) 9240-5134 E-mail : Contato@bufaloinfo.com.br