Arquivo da tag: input value

Validações customizadas com HTML5

HTML5_Logo_512Quando as validações prontas do HTML5 não são suficientes, temos que fazer as nossas.

Em HTML5 temos um novo evento, oninput,  que pode ser associado a um input, e é disparado quando seu valor é modificado. Seu disparo deve ser associado a uma função Javascript para fazer a validação do valor informado no input.

Na função de validação o método setCustomValidity do input recebe uma string. Se vazia, significa que o dado está válido, caso contrário, o navegador mostrará a mensagem informada ao método.

Vamos a um exemplo:

<head>
    <meta charset="utf-8" />
    <title></title>
    <script>

        function validaCPF(input){

            if (input.value.length > 11 || input.value.length < 11)
                input.setCustomValidity('CPF inválido');
            else input.setCustomValidity('');

        }

    </script>
</head>
<body>
    <form>

            CPF:
            <input type="text" id="cpf" name="cpf" oninput="validaCPF(this)">
            <input type="submit" id="enviar" name="enviar" value="Enviar">
    </form>
</body>

 

Se seu querido navegador der suporte ao novo evento, algo como mostrado na imagem abaixo deve aparecer.

evento_oninput

 

 

Simples e eficiente.