Uma das features do HTML5 é a capacidade de validar alguns dados de usuário sem precisar javascript. Isto é feito através do uso de validation attributes nos elementos do formulário que permitem especificar regras para uma entrada de formulário. Como por exemplo especificar se um campo é obrigatório, o tamanho máximo e mínimo do mesmo se ele dever ser um número ou um email etc. Se os dados inseridos seguirem todas as regras especificadas, serão considerados válidos, caso contrário, serão inválidos. Estes dados, geralmente, são validados no momento que você aperta o botão para submeter o form
Algumas vezes, no entanto, precisamos validar os campos antes de submeter o form e é ai que precisamos usar o Javascript. Todavia, não precisamos criar um validação do zero, por exemplo para verificar se um campo obrigatório está devidamente preenchido. Isto porque uma vez que utilizamos validation attributes no HTML o constraint validation API, presente na maioria dos browsers modernos, nos fornece métodos javascript capazes de verificar se um campo é válido ou não baseado em seus validation attributes.
Constraint validation API methods
checkValidity() - Verifica se o valor do elemento está de acordo com suas restrições. Caso positivo ele retorna true do contrário retorna false
reportValidity (HTMLFormElement method) - Verifica se o valor do elemento está de acordo com suas restrições. Caso positivo ele retorna true do contrário retorna false e dispara a mensagem de erro correspondente a restrição no elemento HTML
setCustomValidity(message) - Permite setar uma mensagem de erro personalizada explicando o porque um determinado valor não é válido. Quando uma mensagem é setada o estado do elemento passa a ser inválido. Caso queira que o estado volte a ser válido chame este método e passe uma string vazia como parâmetro.
Hands On
Eu criei o formário abaixo para exemplicar como funciona este tipo de validação.
O campo First Name é required
O campo Email é do tipo email e required e o botão setCustomValidity adiciona uma mensagem de erro customizada ao mesmo
O campo Subject é required, minlength="3" e maxlength="5"
O código do mesmo encontra-se no nosso GitHub