Wie kann ich Standardfehlermeldungen zur HTML5-Formularüberprüfung ändern oder entfernen?

Zum Beispiel habe ich eine textfield. Das Feld ist obligatorisch, es sind nur Zahlen erforderlich und die Länge des Werts muss 10 sein. Wenn ich versuche, ein Formular mit einem Wert von 5 zu senden, wird die Standardfehlermeldung angezeigt:Please match the requested format

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

1. Wie kann ich Standardnachrichten für HTML 5-Formularüberprüfungsfehler ändern?
2. Wenn der erste Punkt ausgeführt werden kann, gibt es eine Möglichkeit, einige Eigenschaftendateien zu erstellen und in diesen Dateien benutzerdefinierte Fehlermeldungen festzulegen?

Ich habe einen Fehler in der Antwort von Ankur gefunden und ihn mit dieser Korrektur behoben:

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

Der Fehler, der auftritt, wenn Sie ungültige Eingabedaten festlegen, dann die Eingabe korrigieren und das Formular senden. Hoppla! das kannst du nicht machen Ich habe es auf Firefox und Chrom getestet

Wenn Sie pattern = verwenden, wird alles angezeigt, was Sie in das title-Attribut eingegeben haben. Es ist also kein JS erforderlich. Führen Sie einfach Folgendes aus:

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

Ich habe diesen Code in einem anderen Beitrag gefunden.

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

So verhindern Sie mit jQuery, dass die Browserüberprüfungsnachricht nicht in Ihrem Dokument angezeigt wird:

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

Sie können diese Warnung folgendermaßen entfernen:

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

Setzen Sie die benutzerdefinierte Nachricht einfach auf ein Leerzeichen

Sie können sie über die API zur Einschränkungsvalidierung ändern: http://www.w3.org/TR/html5/constraints.html#dom-cva-setcustomvalidity

Wenn Sie eine einfache Lösung suchen, können Sie civem.js, Fehlermeldungen zur Überprüfung der benutzerdefinierten Eingabe JavaScript lib hier herunterladen: https://github.com/javanto/civem.js Live-Demo hier: http://jsfiddle.net/ hleinone / njSbH /

Mit setCustomValidity können Sie die Standardüberprüfungsnachricht ändern. Hier finden Sie ein einfaches Beispiel für die Verwendung.

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

Ich habe jetzt versehentlich einen Weg gefunden: Sie können diesen verwenden: Datenfehler: ""

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

Ich habe einen Fehler in der Mahoor13-Antwort gefunden, er funktioniert nicht in einer Schleife, daher habe ich ihn mit dieser Korrektur behoben:

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

Es läuft perfekt in einer Schleife.

Dies ist ein sehr guter Link, den ich zum Überprüfen verschiedener Attribute von HTML5-Validierungen gefunden habe.

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

Hoffe es hilft jemandem.

Wie Sie hier sehen können:

html5 oninvalid funktioniert nicht, nachdem das Eingabefeld korrigiert wurde

Ist gut, dass Sie auf diese Weise setzen, denn wenn Sie den Fehler beheben, verschwinden die Warnmeldungen.

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

Verwenden Sie zum Festlegen einer benutzerdefinierten Fehlermeldung für die HTML 5-Validierung Folgendes:

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

und um diese Nachricht zu entfernen, wenn der Benutzer eine gültige Datennutzung eingibt,

onkeyup="setCustomValidity('')"

Hoffe das funktioniert bei dir. Genießen ;)

Das ist Arbeit für mich 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')"

Sie können einfach "novalidate" für das <form> -Tag verwenden

Klicken Sie hier für weitere Details