Como posso alterar ou remover as mensagens de erro padrão da validação de formulário HTML5?

Por exemplo, eu tenho um textfield. O campo é obrigatório, apenas números são obrigatórios e o tamanho do valor deve ser 10. Quando tento enviar um formulário com um valor de 5, a mensagem de erro padrão é exibida:Please match the requested format

<input type="text" required="" pattern="[0-9]{10}" value="">

1. Como posso alterar as mensagens padrão dos erros de validação de formulário HTML 5?
2. Se o 1º ponto puder ser concluído, existe uma maneira de criar alguns arquivos de propriedades e definir as mensagens de erro personalizadas nesses arquivos?

Encontrei um erro na resposta Ankur e o corrigi com esta correção:

 <input type="text" pattern="[a-zA-Z]+"
    oninvalid="setCustomValidity('Plz enter on Alphabets ')"
    onchange="try{setCustomValidity('')}catch(e){}" />

O erro visto quando você define dados de entrada inválidos, corrija a entrada e envie o formulário. oops! você não pode fazer isso. Eu testei no firefox e chrome

Ao usar pattern =, ele exibirá o que você colocar no atributo attrib, portanto, nenhum JS necessário apenas faz:

<input type="text" required="" pattern="[0-9]{10}" value="" title="This is an error message" />

<input type="text" pattern="[a-zA-Z]+"
oninvalid="setCustomValidity('Plz enter on Alphabets ')" />

Encontrei esse código em outro post.

HTML:

<input type="text" pattern="[0-9]{10}" oninvalid="InvalidMsg(this);" name="email" oninput="InvalidMsg(this);"  />

JAVASCRIPT:

function InvalidMsg(textbox) {

     if(textbox.validity.patternMismatch){
        textbox.setCustomValidity('please enter 10 numeric value.');
    }    
    else {
        textbox.setCustomValidity('');
    }
    return true;
}

Fiddle Demo

Para impedir que a mensagem de validação do navegador apareça no seu documento, com o jQuery:

$('input, select, textarea').on("invalid", function(e) {
    e.preventDefault();
});

você pode remover este alerta fazendo o seguinte:

<input type="text" pattern="[a-zA-Z]+"
    oninvalid="setCustomValidity(' ')"
/>

basta definir a mensagem personalizada para um espaço em branco

você pode alterá-los através da API de validação de restrição: http://www.w3.org/TR/html5/constraints.html#dom-cva-setcustomvalidity

se você quiser uma solução fácil, pode usar o civem.js, mensagens de erro de validação de entrada personalizada JavaScript lib download aqui: https://github.com/javanto/civem.js demo ao vivo aqui: http://jsfiddle.net/ hleinona / njSbH /

O setCustomValidity permite alterar a mensagem de validação padrão. Aqui está um exemplo simples de como usá-lo.

var age  =  document.getElementById('age');
    age.form.onsubmit = function () {
    age.setCustomValidity("This is not a valid age.");
 };

Encontrei uma maneira acidentalmente agora: você pode precisar usar isso: data-error: ""

<input type="username" class="form-control" name="username" value=""
placeholder="the least 4 character"
data-minlength="4" data-minlength-error="the least 4 character"
data-error="This is a custom Errot Text fot patern and fill blank"
max-length="15" pattern="[A-Za-z0-9]{4,}"
title="4~15 character" required/>

Eu encontrei um bug na resposta Mahoor13, ele não está funcionando em loop, então eu o corrigi com esta correção:

HTML:

<input type="email" id="eid" name="email_field" oninput="check(this)">

Javascript:

function check(input) {  
    if(input.validity.typeMismatch){  
        input.setCustomValidity("Dude '" + input.value + "' is not a valid email. Enter something nice!!");  
    }  
    else {  
        input.setCustomValidity("");  
    }                 
}  

Ele funcionará perfeitamente em loop.

Este é um link muito bom que encontrei sobre a verificação de vários atributos das validações html5.

https://dzone.com/articles/custom-validation-messages

Espero que ajude alguém.

Como você pode ver aqui:

html5 oninvalid não funciona depois de corrigir o campo de entrada

É bom que você coloque dessa maneira, pois quando você corrige o erro desapareça a mensagem de aviso.

<input type="text" pattern="[a-zA-Z]+"
oninvalid="this.setCustomValidity(this.willValidate?'':'your custom message')" />

Para definir uma mensagem de erro personalizada para validação em HTML 5,

oninvalid="this.setCustomValidity('Your custom message goes here.')"

e para remover esta mensagem quando o usuário digitar o uso de dados válidos,

onkeyup="setCustomValidity('')"

Espero que funcione para voce. Aproveitar ;)

Isso é trabalho para mim no Chrome

    <input type="text" name="product_title" class="form-control" 
required placeholder="Product Name" value="" pattern="([A-z0-9À-ž\s]){2,}"
oninvalid="setCustomValidity('Please enter on Producut Name at least 2 characters long')"

simplesmente você pode usar "novalidate" para a tag <form>

clique aqui para mais detalhes