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):
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();
(Ich habe alles kommentiert, damit man leichter nachvollziehen kann was an der jeweiligen Stelle passiert.)
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>
Mailadresse doppelt abfragen - bei Anmeldung
Zitieren
Zitat von cliffen
Lesezeichen