nicht angemeldet
Hallo,
ich möchte gerne die Fehlermeldungen für eine HTML5-Formularvalidierung ändern.
Der dafür entwickelte JavaScript-Code ist unten angegeben und kommentiert.
Das Problem ist, dass mit field.setCustomValidity(msg) nicht der Inhalt der jeweils in der Schleife gesetzten Variable msg mit der richtigen Fehlermeldung gesetzt wird, sondern bei allen Durchgängen der Wert aus dem letzten Arrayelement.
Ich weiß nicht, ob dies an meiner Schleife, oder an dem Skriptteil zum Überschreiben der Default-Fehlermeldungen liegt, und bin nun mit meinem Latein am Ende.
Wäre für Hinweise auf die Fehlerursache dankbar.
Grüße aus Berlin,
Sebastian Becker
--------------------------------------------------------------------
// Array mit den IDs der zu prüfenden Felder
// (Die IDs der zu prüfenden Felder und die Indexe des Fehlermeldungsarrays sind identisch. Die IDs könnten natürlich auch direkt aus dem JSON-Array ausgelesen werden)
var msg_id_array = ["subject","message","firstname","lastname","zip","location","street","email","phone"];
// JSON-Array mit Fehlermeldungen aus externer Datei
var mail_msg = {
"subject":"Bitte wählen Sie ein Anliegen (Betreff) aus.",
"message":"Bitte geben Sie Ihre Nachricht ein.",
"title":"Bitte wählen Sie Ihre Anrede aus.",
"firstname":"Bitte geben Sie Ihren Vornamen ein.",
"lastname":"Bitte geben Sie Ihren Nachnamen ein.",
"street":"Bitte geben Sie Ihre Straße und Hausnummer ein.",
"zip":"Bitte geben Sie Ihre Postleitzahl ein.",
"location":"Bitte geben Sie Ihren Wohnort ein.",
"email":"Bitte geben Sie eine eMail-Adresse ein.",
"email_valid":"Bitte geben Sie eine gültige eMail-Adresse ein.",
"phone":"Bitte geben Sie eine gültige Telefonnummer ein."
};
// beim Klicken auf den Submit-Button
$("#submit").on("click", function()
{
for(var i=0; i<msg_id_array.length; i++) { // loop through ID array
msg_id = msg_id_array[i]; // get IDs
msg = mail_msg[msg_id]; // get error message
alert("#" + msg_id + ': ' + document.getElementById(msg_id).validity.valid); // nur zum Testen (hier stimmen die Variableninhalte)
// Hier der Code der nicht funktioniert ...
$("#"+msg_id).on('change invalid', function() {
var field = $(this).get(0);
field.setCustomValidity('');
if(!field.validity.valid) field.setCustomValidity(msg);
});
} // end for loop
}); // end function