Come posso modificare o rimuovere i messaggi di errore predefiniti per la convalida del modulo HTML5?

Ad esempio ho un textfield. Il campo è obbligatorio, sono richiesti solo numeri e la lunghezza del valore deve essere 10. Quando provo a inviare un modulo con un valore di lunghezza 5, viene visualizzato il messaggio di errore predefinito:Please match the requested format

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

1. Come posso modificare i messaggi predefiniti degli errori di convalida del modulo HTML 5?
2. Se è possibile eseguire il primo punto, esiste un modo per creare alcuni file delle proprietà e impostare messaggi di errore personalizzati in tali file?

Ho trovato un bug nella risposta di Ankur e l'ho risolto con questa correzione:

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

Il bug visualizzato quando si impostano dati di input non validi, quindi si corregge l'input e si invia il modulo. oops! non puoi farlo. L'ho provato su Firefox e Chrome

Quando si utilizza pattern = mostrerà tutto ciò che si inserisce nell'attributo title, quindi non è richiesto alcun JS:

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

Ho trovato questo codice in un altro 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

Per impedire che il messaggio di convalida del browser venga visualizzato nel documento, con jQuery:

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

puoi rimuovere questo avviso nel modo seguente:

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

basta impostare il messaggio personalizzato su uno spazio vuoto

puoi cambiarli tramite API di convalida del vincolo: http://www.w3.org/TR/html5/constraints.html#dom-cva-setcustomvalidity

se si desidera una soluzione semplice, è possibile scaricare civem.js, messaggi di errore di convalida dell'input personalizzato JavaScript lib download qui: https://github.com/javanto/civem.js demo live qui: http://jsfiddle.net/ hleinone / njSbH /

SetCustomValidity consente di modificare il messaggio di convalida predefinito. Ecco un semplice esempio di come utilizzarlo.

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

Ho trovato un modo per caso ora: è necessario utilizzare questo: errore di dati: ""

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

Ho trovato un bug sulla risposta di Mahoor13, non funziona in loop quindi l'ho corretto con questa correzione:

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

Funzionerà perfettamente in loop.

Questo è un ottimo collegamento che ho trovato sul controllo di vari attributi delle convalide html5.

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

Spero che aiuti qualcuno.

Come puoi vedere qui:

html5 oninvalid non funziona dopo aver corretto il campo di input

Fa bene a te mettere in quel modo, perché quando correggi l'errore scompare il messaggio di avviso.

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

Per impostare un messaggio di errore personalizzato per la convalida HTML 5, utilizzare,

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

e per rimuovere questo messaggio quando l'utente immette dati validi,

onkeyup="setCustomValidity('')"

Spero che questo funzioni per te. Godere ;)

Questo è un lavoro per me in 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')"

semplicemente puoi usare "novalidate" per il tag <form>

clicca qui per ulteriori dettagli