« Voltar
em html frontend javascript validação

Alterando a validação padrão do HTML5.

No HTML5, se queremos que um campo seja obrigatório em um formumário, basta adicionarmos o atributo required nele:

<form>  
    <input type="text" name="nome" required>
    <input type="submit">
</form>  

Se eu tentar fazer submit desse formulário sem preencher o campo que está marcado com required, receberei uma mensagem de erro:

Drawing

Mas e se eu quiser mudar esse comportamento? E se eu quiser mostrar um alert para o usuário ao invés dessa caixinha?

Poderia usar Javascript para desabilitar a validação padrão e fazer a minha própria:

document.querySelector('form input').oninvalid = function(evt) {  
    // essa linha cancela o comportamento padrão do navegador
    evt.preventDefault();
    // faz a validação novamente
    if (!this.validity.valid) {
        //aqui eu mostro o alert
        alert("O campo nome é obrigatório!");
    }
};

Veja que onde mostramos o alert poderíamos fazer qualquer outra coisa.

E se eu quisesse mostrar aquela caixinha de erro, mas só mudar o texto da mensagem?

document.querySelector('form input').oninvalid = function() {  
   // remove mensagens de erro padrão
   this.setCustomValidity("");
   // faz a validação novamente
   if (!this.validity.valid) {
       // se estiver inválido, coloca a mensagem
       this.setCustomValidity("Nome está inválido!");
    }
};

Legal, não é? (:


Quer ganhar 15% de desconto pra gastar na Casa do Código e ainda ficar em dia com as minhas postagem e outras promoções e sorteios legais? Assina minha newsletter: http://gabsferreira.com/newsletter/ (:

Se quiser, curta minha página no Face também! O endereço é https://www.facebook.com/devgabsferreira

comments powered by Disqus