¿Cómo puedo cambiar o eliminar los mensajes de error predeterminados de validación de formularios HTML5?

Por ejemplo tengo un textfield. El campo es obligatorio, solo se requieren números y la longitud del valor debe ser 10. Cuando intento enviar un formulario con un valor cuya longitud es 5, aparece el mensaje de error predeterminado:Please match the requested format

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

1. ¿Cómo puedo cambiar los mensajes predeterminados de los errores de validación de formularios HTML 5?
2. Si se puede hacer el primer punto, entonces ¿Hay alguna manera de crear algunos archivos de propiedades y establecer en esos archivos mensajes de error personalizados?

Encontré un error en la respuesta de Ankur y lo solucioné con esta corrección:

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

El error que se ve cuando configura datos de entrada no válidos, luego corrige la entrada y envía el formulario. ¡Uy! No puedes hacer esto. Lo he probado en Firefox y Chrome.

Cuando se usa pattern = mostrará lo que pones en el título attrib, por lo que no se requiere JS solo hazlo:

<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 ')" />

Encontré este código en otra publicación.

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 evitar que el mensaje de validación del navegador aparezca en su documento, con jQuery:

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

puede eliminar esta alerta haciendo lo siguiente:

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

solo configure el mensaje personalizado en un espacio en blanco

puede cambiarlos a través de la API de validación de restricciones: http://www.w3.org/TR/html5/constraints.html#dom-cva-setcustomvalidity

si desea una solución fácil, puede usar civem.js, mensajes de error de validación de entrada personalizada Descarga de JavaScript lib aquí: https://github.com/javanto/civem.js demostración en vivo aquí: http://jsfiddle.net/ hleinona / njSbH /

SetCustomValidity le permite cambiar el mensaje de validación predeterminado. Aquí hay un ejemplo simple de cómo usarlo.

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

Encontré un camino accidentalmente ahora: puede necesitar usar esto: error de datos: ""

<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/>

Encontré un error en la respuesta de Mahoor13, no funciona en bucle, así que lo solucioné con esta corrección:

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("");  
    }                 
}  

Funcionará perfectamente en bucle.

Este es un muy buen enlace que encontré sobre la comprobación de varios atributos de validaciones html5.

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

Espero que ayude a alguien.

Como puedes ver aquí:

html5 oninvalid no funciona después de corregir el campo de entrada

Es bueno ponerlo de esa manera, ya que cuando corrige el error, desaparece el mensaje de advertencia.

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

Para configurar un mensaje de error personalizado para el uso de validación HTML 5,

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

y para eliminar este mensaje cuando el usuario ingresa un uso de datos válido,

onkeyup="setCustomValidity('')"

Espero que esto funcione para usted. Disfrutar;)

Esto es trabajo para mí en 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')"

simplemente puede usar "no validar" para la etiqueta <form>

haga clic aquí para obtener más detalles