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:
$smarty->assign('INPUT_EMAIL', xtc_draw_input_fieldNote
(array ('name' => 'email_address', 'text' => ' '. (xtc_not_null
(ENTRY_EMAIL_ADDRESS_TEXT
) ?
'<span class="inputRequirement">'.ENTRY_EMAIL_ADDRESS_TEXT
.'</span>' : '')), '','')); neu:
$smarty->assign('INPUT_EMAIL', xtc_draw_input_fieldNote
(array ('name' => 'email_address', 'text' => ' '. (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.
<?phpif (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:
$(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
$('#MAILADRESSE').css({"border-color":"red"});
oder Grün,
{ $('#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