Druckbare Version
Hallo,
ich bräuchte für ein Anmeldeformular auf einer Webseite eine doppelte Abfrage der Mailadresse. Also konkret zwei Felder mit der Email als Inhalt. Wenn die Felder nicht übereinstimmen gäbe es eine Fehlermeldung. Gibts es da eine Lösung? EFG ist installiert.
Danke für Tipps
Die aktuelle Version dieses Snippets ist nun im Wiki zu finden.
http://de.contaowiki.org/Mail-Adress...ppelt_abfragen
Danke an MacKP für den Hinweis, das ins Wiki zu packen
Zitat:
Zwar ist deine Frage schon älter, aber vielleicht interessiert das ja doch noch jemand.
ACHTUNG!
Diese Methode funktioniert in dieser Form nur für das Layout MIT Tabelle. Für das tabellenlose Layout müssen sicherlich Änderungen vorgenommen werden, da das Script ja die Tabellenzeile identifiziert und dupliziert - und die ist beim tabellenlosen Layout ja nicht vorhanden.
Mir ging es auf den Geist, dass ich jeden Tag zig Registrierungs-eMails zurück bekomme, weil die Leute es zu einem Anteil von ca. 5 bis 10% es nicht schaffen, ihre eMail-Adresse korrekt einzutippen. Bei einigen dutzend neuen Nutzern pro Tag kann das schon einmal nervig werden.
Leider bietet Contao keine Möglichkeit, die Mailadresse doppelt abzufragen und das Template kann man auch nicht mal eben abändern, weil die Registrierungsfelder ja leider dynamisch generiert werden.
Also muss eine andere Lösung her- Und die heißt JavaScript.
Das folgende Script klont das eMail-Feld in der Registrierung und prüft beide Eingabefelder gegenseitig auf Übereinstimmung (Getestet auf Contao 2.11.0):
(Ich habe alles kommentiert, damit man leichter nachvollziehen kann was an der jeweiligen Stelle passiert.)Code:// das Input-Feld des Register-Formulars besorgen
var eMailInput = $$("#tl_registration")[0].elements['email'];
// komplette Tabellen-Zeile besorgen in der sich Form-Element "email" befindet
var eMailRow = eMailInput.getParent().getParent();
// Zeile klonen
var eMailClone = eMailRow.clone();
// das Input-Feld besorgen
var eMailVerifyInput = eMailClone.getChildren('.col_1 input')[0];
// Submit-Button besorgen
var submitBtn = $$("#tl_registration .submit")[0];
// Dem Klon eine andere Klasse zuweisen
eMailClone.set('class', 'email_verify_row');
// Label ändern
eMailClone.getChildren('.col_0').set('html', 'E-Mail wiederh.*');
// Feld umbenennen
eMailVerifyInput.name = 'mail_verify';
// alle CSS-Klassen entfernen und dafür mail_verify setzen
eMailVerifyInput.erase('class');
eMailVerifyInput.addClass('mail_verify');
// neues Markup in Dokument hinter eMail-Zeile injizieren
eMailClone.inject(eMailRow, 'after');
// Prüft, ob beide Angaben korrekt sind
function checkEmailInputs() {
if(eMailInput.value != '') {
if (eMailInput.value == eMailVerifyInput.value) {
eMailVerifyInput.removeClass('wrong');
eMailVerifyInput.addClass('correct');
submitBtn.disabled = 0;
} else {
eMailVerifyInput.addClass('wrong');
eMailVerifyInput.removeClass('correct');
submitBtn.disabled = 1;
}
}
}
// bei Eingabe im "E-Mail wiederholen" mit bereits angegebener Mailadresse gegenprüfen
eMailVerifyInput.addEvent('keyup', function() {
checkEmailInputs();
});
eMailInput.addEvent('keyup', function() {
checkEmailInputs();
});
// Submit-Button initial deaktivieren
submitBtn.disabled = 1;
// falls Formular neu geladen wurde, gleich verifizieren
checkEmailInputs();
dem Verify-Input werden die CSS-Klassen "correct" bzw. "wrong" zugewiesen, je nachdem ob die beiden Eingabefelder übereinstimmen oder nicht. Das ist nur dazu gedacht, um dem Nutzer eine Rückmeldung geben zu können und hat sonst keine Funktion.
Zu sehen ist das Ganze auf folgender Seite: http://www.minestar.de/account.html
Man kann auch noch das Submit-Feld sperren solange nicht beide Eingabefelder übereinstimmen, aber das habe ich mir vorerst gespart, da die Nutzer mit einem sehr auffälligen roten Feld darauf hingewiesen werden, dass etwas nicht stimmt. Das kann sich aber jeder gestalten wie er mag.
Nach einigen Tests kann ich in meinem Fall sagen, dass das neue Eingabefeld keine Probleme macht und Contao 2.11.0 sich nicht dafür interessiert. Sollte dennoch jemand Probleme haben, dann kann das neue Eingabefeld auch einfach beim onSubmit-Event beim Drücken des Senden-Knopfes entfernt werden.
Außerdem kann rein theoretisch noch eine Verifizierung eingebaut werden, die gleich mit prüft, ob überhaupt eine eMail-Adresse eingetragen wurde. Das habe ich mir vorerst auch gespart.
Einbau
Das JavaScript kann prinzipiell an jeder beliebigen Stelle eingebunden werden. Ich habe es direkt inline in das Template "member_default" eingefügt.
Zu beachten ist, dass es NACH dem betreffenden Markup eingebaut wird, weil das Script in dieser Form nicht auf das Domready-Event wartet.
Hier nochmal ohne Kommentare und mit Script-Tags, um es direkt ins Markup einzubauen:
Code:<script type="text/javascript">
/* <![CDATA[ */
var eMailInput = $$("#tl_registration")[0].elements['email'];
var eMailRow = eMailInput.getParent().getParent();
var eMailClone = eMailRow.clone();
var eMailVerifyInput = eMailClone.getChildren('.col_1 input')[0];
var submitBtn = $$("#tl_registration .submit")[0];
eMailClone.set('class', 'email_verify_row');
eMailClone.getChildren('.col_0').set('html', 'E-Mail wiederh.*');
eMailVerifyInput.name = 'mail_verify';
eMailVerifyInput.erase('class');
eMailVerifyInput.addClass('mail_verify');
eMailClone.inject(eMailRow, 'after');
// Prüft, ob beide Angaben korrekt sind
function checkEmailInputs() {
if(eMailInput.value != '') {
if (eMailInput.value == eMailVerifyInput.value) {
eMailVerifyInput.removeClass('wrong');
eMailVerifyInput.addClass('correct');
submitBtn.disabled = 0;
} else {
eMailVerifyInput.addClass('wrong');
eMailVerifyInput.removeClass('correct');
submitBtn.disabled = 1;
}
}
}
eMailVerifyInput.addEvent('keyup', function() {
checkEmailInputs();
});
eMailInput.addEvent('keyup', function() {
checkEmailInputs();
});
submitBtn.disabled = 1;
checkEmailInputs();
/* ]]> */
</script>
Hallo buzzjoe,
vielen Dank für deine Arbeit und das teilen von dem Ergebniss.
Wäre super, wenn du das noch ins Wiki packen könntest -> http://de.contaowiki.org
Hier im Forum geht sowas leider immer recht schnell unter...
Viele Grüße
Wird erledigt :)
Ist eingetragen. Es ist aber noch nicht sichtbar. Müssen neue Einträge im Wiki erst freigeschalten werden?
Wäre mir neu, das die erst freigeschaltet werden müssen...
Kannst mir nen LInk schicken, damit ich das mal anschauen kann?
Viele Grüße
Wenn die Seite noch irgendwo auftauchen würde, dann würde ich dir einen Link schicken :D
Ich versuche es eben noch einmal, sie zu erstellen. Vielleicht habe ich etwas falsch gemacht. Diese Wikis sind mir immer noch suspekt ^^
Entwarnung. Es war eigene Dummheit. Hatte die Rechenaufgabe übersehen. Allerdings sollte die wirklich etwas präsenter formatiert werden :D
Da gibts den Artikel: http://de.contaowiki.org/Mail-Adress...ppelt_abfragen
Danke (hab ich schon gerne gesagt), konnte ich gut gebrauchen.
Hallo,
prinzipiellen vielen Dank für diese Sicherheitsabfrage für die emailadresse.
Ich verstehe nicht warum sowas nicht core-seitig vorgesehen ist. Und das von Anfang an! Bei ALLEN CMS Systemen!
Denn wenn einer sich in der emailadresse verschreibt, was ja eher nicht soooo selten vorkommt, dann gibt das immer erhöhten, eigentlich unnötigen Aufwand.
gruss
dtptiger
Nachtrag:
Auf zwei verschiednen Sites, der submit ist tot:
Code:<div class="submit_container">
<input class="submit" type="submit" value="Registrieren" disabled="">
</div>
Moin,
ich kram das mal raus.
Die Version 1.2.0 von [CheckedEmail] integriert sich nun in die Contao Module "Persönliche Daten" und "Registrierung".
Einfach mal ausprobieren.
Gruß, Cliff
Uii, das sieht ja super aus. Vielen Dank dafür :)Zitat:
Zitat von cliffen