MODUL: Optische E-Mail Validierung mit jQuery

[mhbosch]

Hallo,

ich teile hier mal eine kleine Spielerei, die noch Bastelmöglichkeiten gibt.
Es handelt sich dabei um eine optische eMail Validierung? Damit ist gemeint, das der Benutzer beim Anlegen eines Kontos eine optische Hilfe bekommt, ob seine eMailadresse gültigen Regeln entspricht.

Zuerst einmal muß man dem Shop beibringen, das ein Eingabefeld eine ID hat. Dies geht leider nur in den Coredateien. Ist aber sehr nützlich, wenn man zB auch eine besseres Design erreichen will (zB CLASS auf ein Feld). Aber nun zur Anleitung:

In der Datei /create_account folgende Änderung übernehmen:

alt:

Code: PHP  [Auswählen]

$smarty->assign('INPUT_EMAIL', xtc_draw_input_fieldNote(array ('name' => 'email_address', 'text' => '&nbsp;'. (xtc_not_null(ENTRY_EMAIL_ADDRESS_TEXT) ? '<span class="inputRequirement">'.ENTRY_EMAIL_ADDRESS_TEXT.'</span>' : '')), '',''));

neu:

Code: PHP  [Auswählen]

$smarty->assign('INPUT_EMAIL', xtc_draw_input_fieldNote(array ('name' => 'email_address', 'text' => '&nbsp;'. (xtc_not_null(ENTRY_EMAIL_ADDRESS_TEXT) ? '<span class="inputRequirement">'.ENTRY_EMAIL_ADDRESS_TEXT.'</span>' : '')), '','ID="MAILADRESSE"'));

Damit bekommt das Feld eine ID zugewiesen.

Nun im Template in der Datei \templates\_deintemplate_\javascript\general.js.php folgenden Code einfügen. Damit wird die Script Datei nur geladen, wenn das Formular zum Anlegen eines Benutzers aufgerufen wird.

Code: PHP  [Auswählen]

<?php
if (strstr($PHP_SELF, FILENAME_CREATE_ACCOUNT)) {
?>
<script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/email.js" type="text/javascript"></script>
<?php
}
?>

Nun fehlt noch die Script Datei. Im Verzeichnis \templates\_deintemplate_\javascript\ die Datei email.js anlegen und folgenden Code einfügen:

Code: Javascript  [Auswählen]

$(document).ready(function() {
 
    $('#MAILADRESSE').keyup(function() {  
                checkadress();
    });
       
        $('#MAILADRESSE').blur(function() {
                checkadress();
        });
         
});

function checkadress(){
  var emailaddressVal = $('#MAILADRESSE').val();
         if (validateEmail(emailaddressVal) == false) { $('#MAILADRESSE').css({"border-color":"red"}); }
                else
                { $('#MAILADRESSE').css('border-color','green'); };
};

function validateEmail($email) {
  var emailReg = /^([_a-z0-9-]+)(\.[_a-z0-9-]+)*@([a-z0-9-]+)(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/;
  if( !emailReg.test( $email ) ) {
    return false;
  } else {
    return true;
  }
}

Damit wird bei der Eingabe die Mailadresse geprüft, und beim Verlassen des Feldes (muß sein für Autofill im Browser, der keinen Keyup Event erzeugt).

Während der Eingabe wird das Eingabefeld nun Rot umrandet

Code: Javascript  [Auswählen]

$('#MAILADRESSE').css({"border-color":"red"});

oder Grün,

Code: Javascript  [Auswählen]

{ $('#MAILADRESSE').css('border-color','green'); };

wenn die Adresse valide ist.

Es kommt natürlich ein wenig auch auf eure eigene CSS Formatierung der Templates an, wie es wirkt.
Dies ist ja nur eine kleine Spielerei. Soll aber zeigen, was alles so möglich ist.

[ Für Gäste sind keine Dateianhänge sichtbar ]

[ Für Gäste sind keine Dateianhänge sichtbar ]

vg,

mhbosch

[EDIT Tomcraft 27.01.2015: Screenshots ergänzt.]

Linkback: https://www.modified-shop.org/forum/index.php?topic=22030.0

[luca]

kannst du bitte ein Bild anhängen. Danke dir

[mhbosch]

Hallo Luca,

kann ich später mal machen. Allerdings wird darauf nur die Eingabebox mit halber Email rot umrandet und einmal mit ganzer Email grün umrandet zu sehen sein.

vg,

mhbosch

[mhbosch]

So,

jetzt die Bilder, aber wie schon geschrieben, der Effekt hängt vom Template ab, und die CSS Formatierung, die man im Script wählt (man kann zB ja auch die Schrift rot/grün machen oä).

vg,

mhbosch

[EDIT Tomcraft 27.01.2015: Screenshots in Beitrag 1 ergänzt.]

[Modulfux]

Feine Erweiterung, welche man komplett auf alle Eingabefelder legen sollte.

Eine kleine Sache würde ich aber aufgrund des generierten HTML-Codes ändern. An sich ist es üblich, HTML-Code klein zu schreiben, somit sollte in der php-Datei aus

Code: PHP  [Auswählen]

'ID="MAILADRESSE"

ein

Code: PHP  [Auswählen]

'id="mailadresse"

werden.

Selbstverständlich sollte die "neue" Variable auch im jQuery-Skript angepasst werden.

Ein weiterer Vorteil einer zugewiesenen id bei Eingabefeldern ist auch, dass man die Bezeichner für das Eingabefeld als Label nehmen kann. Quasi in dem Stil:

Code: PHP  [Auswählen]

<label for="mailadresse">E-Mail</label><input type="text" name="email_address" id="mailadresse" />

Gruß
Ronny

[mhbosch]

Hi Ronny,

ja, werde bei meinen Kunden wohl so ziemlich alle Eingabefelder anpassen (auch mit classen). Kleinschreibung gebe ich Dir recht, das war gestern ein 5 Minuten Versuch.

Es gibt für jquery eine Validierungserweiterung, die man komplett nehmen könnte, aber die Bedingungen stehen zu in der DB. Um das richtig umzusetzen bräuchte man einen AJAX Request. Eigentlich aber nicht so das Problem.
Meine Überlegungen gehen auch dahin, die Mailadresse über PHP dahin zu validieren, ob die angegebene Domain überhaupt existiert (SPAM Verhinderung). Eine Kundin fand auch eine Programmierung der 2 Schritt Anmeldung gut. Also den Zugang über einen Link in der Mail zu validieren. Finde ich allerdings nicht so gut, wenn ich was bestelle, und dann erst auf eine Mail (evtl. noch verzögert) zu warten. Dann lieber ein Captcha oä.

Mir macht es immer wenig Freude die Grundanpassungen in den Core Dateien zu machen, da ich das Problem der Wartbarkeit sehe. Es ist vielleicht mein persönliches Empfinden, aber einige "Dinge" sind sehr altbacken. Aber damit ist ja auch gegeben, das das Shopsystem mit alten Templates und Funktionen zurecht kommt.

vg,

mhbosch

[Modulfux]

Rein theoretisch müsste man für die Vergabe der id für die Eingabefelder nur die Funktionen xtc_draw_inputxxx.inc.php um den Parameter "id" erweitern. Es macht ja auch nichts, wenn der der parameter "name" welcher ja von der Funktion gesetzt wird, gleichzeitig auch die "id" ist.

Gruß
Ronny

[Tomcraft]

Hübsche Sache! Merkwürdig, dass das so lange ohne Kommentar blieb...

Grüße

Torsten

[Bonsai]

Evtl. weil die nicht Techniker hier von E-Mail Überprüfung reden und nicht von Validierung. Somit wenig Suchtreffer.

[Tomcraft]

Jetzt hast du ja das Stichwort "E-Mail Überprüfung" hier noch zusätzlich ins Thema gebracht.

Grüße

Torsten

[thomas57]

Hallo mhbosch,
feine Sache, habe ich einmal eingebaut und funktioniert. Finde ich eine gute Erweiterung um "rätselhafte Email" dem Kunden gleich bei der Eingabe mitzuteilen, das etwas nicht passt.
Gruß aus dem Norden von
Thomas