html5 - validacion - validar formulario jquery antes de enviar

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

Question

Por ejemplo, tengo un campo de textfield . El campo es obligatorio, solo se requieren números y la longitud del valor debe ser 10. Cuando intento enviar un formulario cuyo valor es de 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, ¿existe alguna forma de crear algunos archivos de propiedades y establecer en esos archivos mensajes de error personalizados?

Answer 1

Al usar pattern = mostrará todo lo que pones en el atributo attrib, por lo que no es necesario que JS lo haga:

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

Answer 2

Como puedes ver aquí:

html5 oninvalid no funciona después de que se arregló el campo de entrada

Es bueno para usted poner de esa manera, para cuando corrija el error, desactive el mensaje de advertencia.

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

Answer 3

Encontré un camino Accidentally Now: puede necesitar usar esto: 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/>

Answer 4

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

Answer 5

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

Se ejecutará perfectamente en bucle.

Answer 6

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

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

Espero que ayude a alguien.

Answer 7

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

Answer 8

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

Answer 9

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

Answer 10

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 quieres una solución fácil, puedes rockear civem.js, Mensajes de error de Validación de entrada personalizada Descarga JavaScript lib aquí: https://github.com/javanto/civem.js demostración en vivo aquí: http://jsfiddle.net/hleinone/njSbH/

Answer 11

puede eliminar esta alerta haciendo lo siguiente:

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

simplemente establece el mensaje personalizado en un espacio en blanco

Answer 12

simplemente puede usar "novalidate" para la etiqueta <form>

haga clic aquí para más deteails

Answer 13

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

Answer 14

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

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