Como validar elementos de formulário HTML em javascript

A validação é uma parte importante do trabalho com formulários HTML. Infelizmente, nem todos os navegadores fornece suporte para os recursos de validação de HTML5. O exemplo que você encontra aqui não vai funcionar com o Internet Explorer porque o Internet Explorer não suporta nenhum dos recursos de validação HTML5.

Uma grande parte da validação de dados em HTML5 está a criar o tipo certo de formulário. O código a seguir mostra um formulário simples com um nome, número de telefone, e dois campos de senha (um original e uma confirmação).

Os dois primeiros campos usar validação automática, conforme fornecido pelo HTML5. Observe o uso do requeridos atributo em ambos os casos, o que significa que o usuário deve digitar um valor (não necessariamente um valor correto).

Além disso, o espaço reservado atributo fornece uma pista sobre o que o usuário precisa digitar, que é sempre um bom primeiro passo na obtenção de informações. o comprimento máximo atributo impede que os usuários tentando digitar muito ou alguém inserir um script em vez de conteúdo. Da mesma forma, o padrão atributo de procura por informações específicas do usuário.

As mensagens de erro genéricas que HMTL5 fornece são aceitáveis, mas pouco esclarecedora. Este exemplo mostra como usar o x-moz-errormessage atributo, a fim de criar uma mensagem de erro personalizada. Muitos navegadores não suportam esse atributo, assim os usuários podem continuar a ver a mensagem de erro genérico, mas há pelo menos uma chance de que os usuários vão ver algo que é um pouco mais orientada para fornecer informações úteis.

Os dois campos de senha não pode contar com validação HTML5 padrão. Neste caso, você deve usar o javascript para confirmar que o usuário inseriu a mesma senha em ambos os campos e que os campos, de fato, contêm uma senha. Aqui está o ValidatePassword () função utilizada para realizar a validação:

função ValidatePassword (P1, P2) {if (P1.value = P2.value || P1.value == "" || P2.value == ""!) {P2.setCustomValidity ( "A senha está incorreta") - } else {P2.setCustomValidity ( "") -}}

O exemplo que se verifica que os dois campos de senha conter uma entrada e que a entrada é o mesmo em ambos os campos. Naturalmente, a sua verificação de senha poderia fazer mais. A mensagem de erro aparece como um pop-up. Observe como cada campo contém uma dica útil sobre o que escrever.