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

Question

Ad esempio, ho un textfield. Il campo è obbligatorio, solo i numeri sono necessari e la lunghezza del valore deve essere 10. Quando cerco di presentare il modulo con un valore la cui 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 cambiare Messaggi di errore di validazione del modulo HTML 5 predefiniti?
2. Se è possibile eseguire il primo punto, esiste un modo per creare alcuni file di proprietà e impostare in tali file messaggi di errore personalizzati?

Answer 1

Ho trovato un bug su Ankur risposta e ho risolto il tutto con questa correzione:

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

Il bug visto quando si imposta un dato di input non validi, quindi correggere l'input e inviare il modulo. oops! non puoi farlo ho testato su Firefox e Chrome

Answer 2

è possibile modificarli tramite vincolo api convalida: http://www.w3.org/TR/html5/constraints.html#dom-cva-setcustomvalidity

se si desidera una soluzione semplice, che si può roccia fuori civem.js, personalizzato convalida dell'input dei messaggi di errore JavaScript lib scaricare qui: https://github.com/javanto/civem.js dal vivo demo qui: http://jsfiddle.net/hleinone/njSbH/

Answer 3

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

Ho trovato questo codice in un altro post.

Answer 4

Quando si utilizza pattern = verrà visualizzato ciò che si mette nel titolo attrib, quindi non JS richiesti solo fare:

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

Answer 5

Il setCustomValidity permettono di modificare l'impostazione predefinita messaggio di convalida. Ecco un semplice esempio su come usarlo.

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

Answer 6

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 7

è possibile rimuovere questo avviso facendo seguente:

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

Basta impostare il messaggio personalizzato ad uno spazio vuoto

Answer 8

Per evitare che il messaggio di convalida del browser di apparire nel documento, con jQuery:

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

Answer 9

Questo è un ottimo collegamento che ho trovato sulla verifica di vari attributi delle convalide html5.

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

Speranza che aiuta qualcuno.

Answer 10

ho trovato un modo Accidentally Ora: si può avere bisogno di utilizzare questo: dati di errore: ""

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

Come si può vedere qui:

html5 oninvalid doesn't work after fixed the input field

è buona per voi Metti in questo modo, perché quando correggi l'errore sparisci il messaggio di avviso.

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

Answer 12

Ho trovato un bug su Mahoor13 risposta, non funziona in ciclo in modo ho risolto con la 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(""); 
    }     
} 

Sarà pe perfettamente funzionante.

Answer 13

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

Answer 14

semplicemente è possibile utilizzare "novalidate" per < form> tag

click here for more deteails