Wikizone - Benutzerbeiträge [de]

Validate (jQuery Plugin)

2012-05-16T14:16:28Z

79.240.91.208: /* Links */

== Links ==

http://docs.jquery.com/Plugins/Validation/validate#options

http://blogs.fau.de/webworking/2011/05/13/tutorial-zur-eingabevalidierung-von-formularen-mit-hilfe-von-jquery/ (Zugriff: 2012-05)

== Validate Snippets ==

== Komplettes Beispiel ==
<pre>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Eingabevalidierung von Formularen mit Hilfe von jQuery</title>

<style type="text/css">
* { font-family: Verdana; font-size: 10pt; }
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
form { width: 40em; }
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://view.jquery.com/trunk/plugins/validate/jquery.validate.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$("#Formular").validate({
rules: {
vorname: "required",
nachname: "required",
passwort: {
required: true,
minlength: 6,
maxlength: 10
},
passwort2: {
required: true,
equalTo: "#passwort",
minlength: 6,
maxlength: 10
},
email: {
required: true,
email: true
}
},
messages: {
vorname: "Bitte Vornamen angeben!",
nachname: "Bitte Nachnamen angeben!",
passwort: {
required: "Bitte Passwort angeben!",
minlength: jQuery.format("mindestens {0} Zeichen eingeben!"),
maxlength: jQuery.format("maximal {0} Zeichen eingeben!")
},
passwort2: {
required: "Bitte Passwort wiederholen!",
equalTo: "Passwort wiederholen",
minlength: jQuery.format("mindestens {0} Zeichen eingeben"),
maxlength: jQuery.format("maximal {0} Zeichen eingeben!")
},
email: {
required: "Bitte E-Mail-Adresse eingeben!",
email: "E-Mail im Format name@domain.de eingeben!"
}
},
submitHandler: function() {
alert("submitted!")
}
});
});
</script>
</head>

<body>
<form id="Formular" method="post" action="validate.php">
<fieldset>
<legend>Ein einfaches Formular</legend>
<p>
<label for="vorname">Vorname<em>*</em></label>
<input type="text" id="vorname" name="vorname" size="15"/>
</p>
<p>
<label for="nachname">Nachname<em>*</em></label>
<input type="text" id="nachname" name="nachname" size="15"/>
</p>
<p>
<label for="passwort">Passwort<em>*</em></label>
<input type="password" id="passwort" name="passwort" size="15"/>
</p>
<p>
<label for="passwort2">Passwort erneut<em>*</em></label>
<input type="password" id="passwort2" name="passwort2" size="15"/>
</p>
<p>
<label for="email">E-Mail<em>*</em></label>
<input type="text" id="email" name="email" size="15"/>
</p>
<p>
<input class="submit" type="submit" value="abschicken"/>
</p>
</fieldset>
</form>
</body>
</html>
</pre>

Validate (jQuery Plugin)

2012-05-16T14:15:52Z

79.240.91.208: /* Links */

== Links ==
http://docs.jquery.com/Plugins/Validation/validate#options

[[http://blogs.fau.de/webworking/2011/05/13/tutorial-zur-eingabevalidierung-von-formularen-mit-hilfe-von-jquery/]] (Zugriff: 2012-05)

== Validate Snippets ==

== Komplettes Beispiel ==
<pre>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Eingabevalidierung von Formularen mit Hilfe von jQuery</title>

<style type="text/css">
* { font-family: Verdana; font-size: 10pt; }
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
form { width: 40em; }
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://view.jquery.com/trunk/plugins/validate/jquery.validate.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$("#Formular").validate({
rules: {
vorname: "required",
nachname: "required",
passwort: {
required: true,
minlength: 6,
maxlength: 10
},
passwort2: {
required: true,
equalTo: "#passwort",
minlength: 6,
maxlength: 10
},
email: {
required: true,
email: true
}
},
messages: {
vorname: "Bitte Vornamen angeben!",
nachname: "Bitte Nachnamen angeben!",
passwort: {
required: "Bitte Passwort angeben!",
minlength: jQuery.format("mindestens {0} Zeichen eingeben!"),
maxlength: jQuery.format("maximal {0} Zeichen eingeben!")
},
passwort2: {
required: "Bitte Passwort wiederholen!",
equalTo: "Passwort wiederholen",
minlength: jQuery.format("mindestens {0} Zeichen eingeben"),
maxlength: jQuery.format("maximal {0} Zeichen eingeben!")
},
email: {
required: "Bitte E-Mail-Adresse eingeben!",
email: "E-Mail im Format name@domain.de eingeben!"
}
},
submitHandler: function() {
alert("submitted!")
}
});
});
</script>
</head>

<body>
<form id="Formular" method="post" action="validate.php">
<fieldset>
<legend>Ein einfaches Formular</legend>
<p>
<label for="vorname">Vorname<em>*</em></label>
<input type="text" id="vorname" name="vorname" size="15"/>
</p>
<p>
<label for="nachname">Nachname<em>*</em></label>
<input type="text" id="nachname" name="nachname" size="15"/>
</p>
<p>
<label for="passwort">Passwort<em>*</em></label>
<input type="password" id="passwort" name="passwort" size="15"/>
</p>
<p>
<label for="passwort2">Passwort erneut<em>*</em></label>
<input type="password" id="passwort2" name="passwort2" size="15"/>
</p>
<p>
<label for="email">E-Mail<em>*</em></label>
<input type="text" id="email" name="email" size="15"/>
</p>
<p>
<input class="submit" type="submit" value="abschicken"/>
</p>
</fieldset>
</form>
</body>
</html>
</pre>

Validate (jQuery Plugin)

2012-05-16T14:15:27Z

79.240.91.208: /* Komplettes Beispiel */

== Links ==
[[http://docs.jquery.com/Plugins/Validation/validate#options]]

[[http://blogs.fau.de/webworking/2011/05/13/tutorial-zur-eingabevalidierung-von-formularen-mit-hilfe-von-jquery/]] (Zugriff: 2012-05)
== Validate Snippets ==

== Komplettes Beispiel ==
<pre>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Eingabevalidierung von Formularen mit Hilfe von jQuery</title>

<style type="text/css">
* { font-family: Verdana; font-size: 10pt; }
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
form { width: 40em; }
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://view.jquery.com/trunk/plugins/validate/jquery.validate.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$("#Formular").validate({
rules: {
vorname: "required",
nachname: "required",
passwort: {
required: true,
minlength: 6,
maxlength: 10
},
passwort2: {
required: true,
equalTo: "#passwort",
minlength: 6,
maxlength: 10
},
email: {
required: true,
email: true
}
},
messages: {
vorname: "Bitte Vornamen angeben!",
nachname: "Bitte Nachnamen angeben!",
passwort: {
required: "Bitte Passwort angeben!",
minlength: jQuery.format("mindestens {0} Zeichen eingeben!"),
maxlength: jQuery.format("maximal {0} Zeichen eingeben!")
},
passwort2: {
required: "Bitte Passwort wiederholen!",
equalTo: "Passwort wiederholen",
minlength: jQuery.format("mindestens {0} Zeichen eingeben"),
maxlength: jQuery.format("maximal {0} Zeichen eingeben!")
},
email: {
required: "Bitte E-Mail-Adresse eingeben!",
email: "E-Mail im Format name@domain.de eingeben!"
}
},
submitHandler: function() {
alert("submitted!")
}
});
});
</script>
</head>

<body>
<form id="Formular" method="post" action="validate.php">
<fieldset>
<legend>Ein einfaches Formular</legend>
<p>
<label for="vorname">Vorname<em>*</em></label>
<input type="text" id="vorname" name="vorname" size="15"/>
</p>
<p>
<label for="nachname">Nachname<em>*</em></label>
<input type="text" id="nachname" name="nachname" size="15"/>
</p>
<p>
<label for="passwort">Passwort<em>*</em></label>
<input type="password" id="passwort" name="passwort" size="15"/>
</p>
<p>
<label for="passwort2">Passwort erneut<em>*</em></label>
<input type="password" id="passwort2" name="passwort2" size="15"/>
</p>
<p>
<label for="email">E-Mail<em>*</em></label>
<input type="text" id="email" name="email" size="15"/>
</p>
<p>
<input class="submit" type="submit" value="abschicken"/>
</p>
</fieldset>
</form>
</body>
</html>
</pre>

Validate (jQuery Plugin)

2012-05-16T14:14:45Z

79.240.91.208: Die Seite wurde neu angelegt: „== Links == http://docs.jquery.com/Plugins/Validation/validate#options [[http://blogs.fau.de/webworking/2011/05/13/tutorial-zur-eingabevalidierung-von-formul…“

== Links ==
[[http://docs.jquery.com/Plugins/Validation/validate#options]]

[[http://blogs.fau.de/webworking/2011/05/13/tutorial-zur-eingabevalidierung-von-formularen-mit-hilfe-von-jquery/]] (Zugriff: 2012-05)
== Validate Snippets ==

== Komplettes Beispiel ==
<pre>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Eingabevalidierung von Formularen mit Hilfe von jQuery</title>

<style type="text/css">

* { font-family: Verdana; font-size: 10pt; }

label { width: 10em; float: left; }

label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }

p { clear: both; }

.submit { margin-left: 12em; }

em { font-weight: bold; padding-right: 1em; vertical-align: top; }

form { width: 40em; }

</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript" src="http://view.jquery.com/trunk/plugins/validate/jquery.validate.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$("#Formular").validate({
rules: {
vorname: "required",
nachname: "required",
passwort: {
required: true,
minlength: 6,
maxlength: 10
},
passwort2: {
required: true,
equalTo: "#passwort",
minlength: 6,
maxlength: 10
},
email: {
required: true,
email: true
}
},
messages: {
vorname: "Bitte Vornamen angeben!",
nachname: "Bitte Nachnamen angeben!",
passwort: {
required: "Bitte Passwort angeben!",
minlength: jQuery.format("mindestens {0} Zeichen eingeben!"),
maxlength: jQuery.format("maximal {0} Zeichen eingeben!")
},
passwort2: {
required: "Bitte Passwort wiederholen!",
equalTo: "Passwort wiederholen",
minlength: jQuery.format("mindestens {0} Zeichen eingeben"),
maxlength: jQuery.format("maximal {0} Zeichen eingeben!")
},
email: {
required: "Bitte E-Mail-Adresse eingeben!",
email: "E-Mail im Format name@domain.de eingeben!"
}
},
submitHandler: function() {
alert("submitted!")
}
});
});
</script>
</head>

<body>
<form id="Formular" method="post" action="validate.php">
<fieldset>
<legend>Ein einfaches Formular</legend>
<p>
<label for="vorname">Vorname<em>*</em></label>
<input type="text" id="vorname" name="vorname" size="15"/>
</p>
<p>
<label for="nachname">Nachname<em>*</em></label>
<input type="text" id="nachname" name="nachname" size="15"/>
</p>
<p>
<label for="passwort">Passwort<em>*</em></label>
<input type="password" id="passwort" name="passwort" size="15"/>
</p>
<p>
<label for="passwort2">Passwort erneut<em>*</em></label>
<input type="password" id="passwort2" name="passwort2" size="15"/>
</p>
<p>
<label for="email">E-Mail<em>*</em></label>
<input type="text" id="email" name="email" size="15"/>
</p>
<p>
<input class="submit" type="submit" value="abschicken"/>
</p>
</fieldset>
</form>
</body>
</html>
</pre>

JQuery

2012-05-16T14:09:33Z

79.240.91.208: /* Links */

==Quickstart==

http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

Gut durchlesen, hier werden die meisten Basics angesprochen.

[[jQuery - Snippets]]

== Links ==
Elemente auswählen: http://docs.jquery.com/DOM/Traversing/Selectors

Ereignisse: http://docs.jquery.com/Events

Gute Tools out of the Box:
Erste Wahl mit allem was man so braucht sind die jQuery Tools:

http://flowplayer.org/tools/index.html

Oder in Kurzform hier: [[JQuery Tools (flowplayer.org)]]

[[jQuery - Snippets]]

Validierung mit jQuery: [[Validate (jQuery Plugin)]]

==Einbinden==
Es gibt die Core Datei und einige nützliche Erweiterungen die man sich passend zusammestellen kann um die Download Größe klein zu halten. Außerdem gibt es gepackte Versionen.

===Über Google===
Hinweis: Google gibt an man solle zuerst den API Code übergeben damit es funktioniert. Der direkte Zugriff funktioniert aber auch ohne. Vielleicht geht es nicht wenn man die google. load Funktion nutzt (hier nicht weiter behandelt)

Beispiel API Code Übergabe:
<script type="text/javascript" src="https://www.google.com/jsapi?key=INSERT-YOUR-KEY"></script>

'''Beispiel:'''

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

ui steht für User Interface (Plugins)

=== Über jQuery Server ===
Beispiel:
<script src="http://code.jquery.com/jquery-latest.js"></script>

=== Libary auf eigenem Server ===
==== Geo-bit webmynet ====
ToDo -> Idee ist verschiedene libs auf tools.webmynet.de vorzuhalten ähnlich wie sie auf dem Google Server liegen.
Zweck: einfache Einbindung, Statistik, Testing

=== Typo3 ===
siehe JavaScript Frameworks nutzen

== Der Beginn ==
In der Regel soll es losgehen, sobald das Dokument geladen ist (weil dies für manche Manipulationen notwendig ist) Deshalb beginnt man i.d.R. mit einem Onload Event:

$(document).ready(function() {
// do stuff when DOM is ready
});

Oder Abgekürzt

$(function() {
// do stuff when DOM is ready
});

== Reagieren auf Klick ==
<pre>
$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
});

</pre>
$("a")
bedeutet Das was jetzt kommt gilt für alle Links
.click()
es soll bei Klick etwas passieren

Früher hat man das so gelöst:
<a href="" onclick="alert('Hello world')">Link</a>
Das funktioniert, allerdings muß man hier bei jedem Link den Schnipsel einfügen.

== Zugriff auf Elemente ==
Old School:
document.getElementById("orderedlist")
Mit JQuery analog zu obigem Beispiel
<pre>
$(document).ready(function() {
$("#orderedlist").addClass("red");
});

</pre>
Hier wird noch eine Klasse eingebaut

'''Weitere Beispiele:'''

$("#orderedlist > li")
Alle Listenelemente unterhalb #orderedlist
#orderedlist li:last
Hier ist nur das letzte Listenelement gemeint.
<pre>
$(document).ready(function() {
$("#orderedlist li:last").hover(function() {
$(this).addClass("green");
},function(){
$(this).removeClass("green");
});
});
</pre>
Die Hoverfunktion kann zwei Funktionen als Parameter aufnehmen.

== Elemente manipulieren, hinzufügen, entfernen ==

== Weitere Funktionen ==
find()
addClass()
removeClass()
hover()
each()
append()

== Ereignisse ==

== Weitere Beispiele ==
<pre>
// Find some li s and append Text
$("#orderedlist").find("li").each(function(i) {
$(this).append( " BAM! " + i );
});

$("a[href*=/content/gallery]").click(function() {
// do something with all links that point somewhere to /content/gallery
});

// use this to reset a single form
$("#reset").click(function() {
$("form")[0].reset();
});

// use this to reset several forms at once
$("#reset").click(function() {
$("form").each(function() {
this.reset();
});
});

// Find li elements that does NOT have a parent ul
$(document).ready(function() {
$("li").not(":has(ul)").css("border", "1px solid black");
});

// Find elements with a name attribute
$(document).ready(function() {
$("a[name]").css("background", "#eee" );
});

// Grab the parent
$("a").hover(function(){
$(this).parents("p").addClass("highlight");
},function(){
$(this).parents("p").removeClass("highlight");
});

</pre>

=== Testen ob jQuery geladen ist ===
Testen ob geladen, wenn nicht von google holen, wenn nicht verfügbar lokale Version nehmen

<pre>
jQuerySrc = 'fileadmin/js/jquery-min.js';

// only load jQuery if not present
if (typeof jQuery == 'undefined') {
document.write("<script type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js\"></"+"script>");
}

// if Google is down
if (typeof jQuery == 'undefined') {
document.write("<script type=\"text/javascript\" src=\"" + jQuerySrc + "\"></"+"script>");
}
</pre>

== Troubleshooting - Probleme Lösen ==
[[jQuery - Probleme lösen (Troubleshooting)]]

Telecash

2012-05-16T05:24:57Z

79.240.91.208: /* Transaction Failed */

Telecash bietet eine Schnittstelle zu Zahlungsabwicklung an.

Dabei gibt es verschiedene Möglichkeiten den Zahlungsvorgang abzuwickeln. Sie unterscheiden sich wie folgt.

== Begriffe und Abkürzungen ==

* TeleCash Connect - Beschreibt die Möglichkeit eine Webseite mit dem Zahlungsservice von TeleCash zu verbinden. Darunter läuft das ganze Marketing. Enthält technisch gesehen mehrere Möglichkeiten.
* TeleCash Internet Payment Gateway (IPG) - Die technische Schnittstelle

== Gehostete oder Eigene Zahlungsformulare ==
Es gibt grundsätzlich 2 Möglichkeiten der integration in die HP.
=== Gehostete Zahlungsformulare ===
* Kunde übermittelt Zahlungsdaten komplett auf Telecash Server
* Telecash Server leitet Kunde danach zurück auf definierte Seite der HP
* Telecash Server gibt Ergebnis des Zahlvorgangs zurück

=== Eigene Formulare ===
* Formular liegt auf eigenem Server (https sinnvoll)
* Umfang der selbst erfassten Daten ist Variabel (Kreditkartendaten separat)
* Umfang der an die Telecash API gelieferten Daten variabel (nur Zahldaten oder auch Rechnungs- und Lieferdaten)
* API bietet weitere zusätzliche Möglichkeiten für Einbindung in Geschäftsprozessse (erfordert viel Einarbeitung)

== Telecash Modi zur Festlegung des Umfangs der übermittelten Daten ==
In den zwei Möglichkeiten gibt es wiederum eine Bandbreite von Modi.

Diese unterscheiden sich hauptsächlich darin wo welche Daten verarbeitet werden bzw. welche Daten an Telecash übermittelt werden.

Die Daten können ganz oder teilweise von eigenen und Telecash Formularen erfasst werden. Wenn Sie von eigenen Formularen erfasst werden müssen Sie über die API (Telecash Connect genannt) übermittelt werden.

=== PayOnly ===
An Telecash geht nur ein Mindestbestand an Informationen für die Transaktion (z. B. Kontonummer und Bankleitzahl für Lastschrift- Transaktionen). Wenn man das Telecash Formular nimmt werden hier nur diese Daten erfasst.
=== Pay Plus ===
Zusätzlich werden Rechnungsdaten erfasst. Wenn man die Telecash Formulare nutzt bekommt der Benutzer zwei Seiten. Eine für die Rechnungs- und eine für die Zahlungsdaten.
=== FullPay ===
* Nur der Zahlungsbetrag wird übermittelt. Der Rest wird von Telecash erfasst. Hier kommt also noch Zahlungsweise etc. dazu.
* Am einfachsten zu integrieren aber schlecht um selbst Daten zu verarbeiten.

== Grundvoraussetzungen ==
=== storename ===
Die ID Ihres Shops, die Sie von TeleCash erhalten haben. Zum Beispiel: 10123456789
=== Shared Secret ===
Gemeinsamer Schlüssel
Der gemeinsam verwendete (symmetrische) Schlüssel, den Sie von TeleCash erhalten haben. Er wird zur Erzeugung des Hash-Wertes (siehe unten) benötigt.

== POST Felder vom Telecash Server ==
=== Transaction Failed ===
Beispiel:
<pre>
fail_reason Transaktion abgelehnt, Bank nimmt nicht am Giropay-Verfahren teil
paymentMethod giropay
oid 12022223188-16
response_hash 8fc9ed9f8d0e02ffa50c0835d49902dea629cd53
chargetotal 10,00
currency 978
refnumber 999999
tdate 1337145569
txntype sale
txndate_processed 16.05.12 07:19:29
ccbrand N/A
approval_code N:1940:No operator for bank code 64050000
bankcode 64050000
status ABGELEHNT
fail_rc 41940
cccountry N/A
timezone GMT
terminal_id 54000015
processor_response_code 1940
</pre>

== Händler Login ==
Online Schnittstelle über die man seine Daten abfragen kann.

https://test.ipg-online.com/emea/login.jsp?lng=de_DE

damit man die Seite angezeigt bekommt braucht man erst ein persönliches Zertifikat, welches man im Browser installieren muß.

Telecash

2012-05-16T05:23:29Z

79.240.91.208: /* Händler Login */