Soviel erstmal zur Theorie, der Funktionsaufruf sieht wie folgt aus:

1

 $('#someElement').load('/someFile #mydiv');

So kurz so einfach. In das Element mit der id “someElement” wird der gesamte Inhalt eines divs mit der id “mydiv” geladen. Das geniale dabei ist, dass sich “mydiv” überhaupt nicht im aktuellen Dokument befindet, sondern in der Datei “someFile”.
Als zweiten Parameter kann man der load Funktion auch noch Daten als sogenanntes Key/Value Paar übergeben.

1

 $('#someElement').load('someFile.php',{'param': 'someValue'});

Das enspricht allerdings jetzt schon eher dem normalen Ajax-Request. Das oder die Key/Value Paare werden dem php-Skript als post-Paramter übergeben. Natürlich verliert man damit den Vorteil des vorigen Beispiels sich einfach DOM-Elemente aus einem anderen HTML-Skript zu holen. Aber falls man das Ergebnis eines Request einfach direkt ohne weitere Verarbeitung in ein Element einfügen möchte, ist das eine sehr einfache und komfortable Variante.

Im nächsten Teil wird es dann um die anderen fortgeschritten jQuery Ajax Varianten wie get, getJSON, etc. gehen.

Ähnliche Artikel

• 12. August 2009 -- jQuery Form Plugin – Do some AJAX magic easily
• 16. Mai 2009 -- jQuery Formulare validieren – Ein Überblick
• 16. Mai 2009 -- Formulare mit jQuery – die umfassende Serie

Heute wollen wir mit Teil 1 – “Übersicht über aktuelle Form-Validaton Scripts” beginnen.
Da es zahlreiche dieser Scripts gibt, und diese sich Teilweise nur minimal voneinander unterscheiden da sie meist auf dem bassistance-Plugin von Jörn Zaefferer basieren, werden wir versuchen euch hier nur die vorzustellen welche besonders im Bezug auf Funktionalität, Größe oder Einfachheit der Implementierung sind.

Beim validation Plugin von bassistance kann man wohl vom offiziellen validation Plugin von jQuery sprechen. Dieses Plugin lässt nahezu keine Wünsche offen.
Das Plugin ist, für die vielzahl an Möglichkeiten die es bietet, mit nur 24KB in der minified-Version nicht sonderlich groß. Es ist ab jQuery 1.2.6+ verfügbar und kompatibel mit Version 1.3.2.

Es bietet alle nur erdenklichen Arten der Formular Überprüfung.

• Validierung on the fly (beim Wechsel in das nächste Feld), validieren auf submit, validieren von Textfeldern, Textareas, radiobuttons und checkboxen.
• Es besteht z.B. auch die Möglichkeit diese in Abhängigkeit voneinander zu prüfen. Bei einer Gruppe von checkboxen kann z.b. geprüft werden wieviele ausgewählt sein müssen usw.
• Auch das prüfen von Selects und multiple-Selects ist ohne weiteres möglich.
• Eingaben können auf Länge, Typ (E-Mail, Number, String…), Anzahl der gewählten Elemente usw. validiert werden.
• Die Ausgabe der Error-Messages ist sehr flexibel gehalten. So können diese direkt am entsprechenden Formular-Element oder gesammelt, z.B. in einem div, ausgegeben werden. Ändert der User eine fehlerhafte Eingabe reagiert die Validierung und ändert die Error-Messages on the fly.
• Mit dem Plugin können richtig ausgefüllte Formulare, auf submit, auch direkt per AJAX verarbeitet werden.

Das einbinden des Scripts ist auch denkbar einfach.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

$().ready(function() {
	$("#FormularID").validate({
		rules: {
			firstname: "required",
			lastname: "required",
			username: {
				required: true,
				minlength: 2
			},
			password: {
				required: true,
				minlength: 5
			},
			confirm_password: {
				required: true,
				minlength: 5,
				equalTo: "#password"
			}
	});
});

Nun müsst ihr nur noch euren Formular-Elementen die entsprechende ID geben.

Eine Vielzahl von Demos und die Dateien zum Download findet ihr auf der offiziellen Website.

Bei jVal handelt sich um eines der etwas schöneren Validation-Plugins.
Das Plugin funktioniert mit der aktuellen jQuery-Version 1.3.1 und hat nur 5.3KB.
Die Grundfunktionen des Plugins kurz im Überblick:

• Validieren von Inhalten innerhalb eines bestimmten Containers, basierend auf den Attributen des Input-Tags.
• Einfache Konfiguration der Validierungsmöglichkeiten.
• Validierung aller Formular-Felder innerhalb eines Containers mit einem einzigen Funktionsaufrufs.
• Validierung einzelner Formular-Felder wenn der User das Feld verlässt.
• Verhindern der Eingabe von speziellen Zeichen in ein Feld mit Meldung an den User das dies nicht erlaubt ist.

Das besondere an diesem Plugin ist wohl die animierte Ausgabe der Fehlermeldungen. Diese sliden mit einem Blur vom Feldende aus ein.

Für das Plugin werden neben der jVal.js und der jquery.js noch ein jVal.css sowie jquery.corner.js von Dave Methvin benötigt. Mittels des sehr übersichtlichen css-Files lässt sich das Aussehen der Error-Messages ohne Probleme anpassen.

Das implementieren des Plugins ist, wie ich finde, nicht ganz optimal gelöst. Hat man sich jedoch erst einmal damit vertraut gemacht geht es doch reicht einfach von der Hand.
Die übergabe der Parameter findet, im Gegensatz zu den meisten anderen Plugins, nicht zentral statt sondern muss jedem Formular-Element mitgegeben werden.

1

<input id="f1" size="20" type="text" />

AlphaNumeric von Paulo Marinas ist ein validation-Plugin welches sich speziell der Begrenzung der Eingabe widmet. AlphaNumeric baut auf dem Numeric Plugin von Sam Collet auf, welches nur die Eingabe von Zahlen und Punkten erlaubt.
Mit AlphaNumeric habt ihr die Möglichkeit die Eingaben in Formularfelder so zu Filtern das nur bestimmte Typen eingegeben werden können.
Die Grundfunktionen des Plugins kurz im Überblick:

• Begrenzung der Eingabe ausschließlich auf Buchstaben
• Begrenzung der Eingabe ausschließelich auf Zahlen
• Begrenzung der Eingabe auf Zahlen und Buchstaben (keine Satz oder Sonderzeichen)
• Erstellen eigener Regeln für die Eingabe

Ein sehr nützliches Plugin wenn man die volle Kontrolle über seine Felder haben will.
Ein einfaches Beispiel für die Implementierung:

1
2

$('.klasse1').alphanumeric();
$('.klasse2').alphanumeric({allow:"., "});

dann müsst Ihr nur noch euren Textfelder die entsprechende Klasse zuweisen und das war es schon.

1
2

<input class="klasse1 tb" size="10" type="text" />
<input class="klasse2 tb" size="10" type="text" />

Alle Dateien zum Download sowie Demos findet ihr auf der offiziellen Website.

Der Form Validator von Jeremy Fry überzeugt aufgrund seiner Schlicht- und Schönheit. Zudem ist er extrem einfach zu implementieren. Das Plugin hat nur 5KB und läuft mit jQuery 1.3.2

Formularfelder werden on the fly validiert und werden, je nach Eingabe, “grün” oder “rot” umrahmt.
Zusätzlich kann man direkt angeben welche php-Datei zur Verarbeitung aufgrufen werden soll.
Sind alle Eingaben valide und klickt man auf Submit, so fadet das Formular aus und verarbeitet die Eingaben via AJAX und gibt das Ergebniss zurück.
Speziell validiert werden können E-Mailadressen, Telefonnummern, Postleitzahlen, Namen und Datumseingaben.
Das zugehörige CSS ist sehr übersichtlich und kann problemlos angepasst werden.

Ein einfaches Beispiel für die Implementierung:

1
2
3
4
5
6
7
8

$(document).ready(function ()
{
	$('#myform').FormValidate({
		phpFile:"send.php",
		ajax:true,
		validCheck: false
	});
});

Anschließend nur noch euren Textfeldern die entsprechnden Klassen zuweisen.

1
2

<input id="form_name" class="is_required" name="Name" type="text" />
<input id="form_email" class="vemail" name="Email" type="text" />

Eine Demo sowie alle Dateien zum Download findet Ihr auf der offiziellen Website.

• Einfache jQuery form validaton mit JSON return
• jQuery Formular zum Filtern versch. Eingaben
• Formular-Validierung mit jQuery und AJAX
• Einfaches jQuery (AJAX) Formular mit PHP-Validierung
• Formular Eingaben mit jQuery maskieren
• jQuery Validierung customizen

Der Vollständigkeit wegen sollt hier auch noch das Form Plugin von Malsup erwähnt werden, welches sicher eines der, wenn nicht dass, umfangreichsten Formular Plugins für jQuery ist. Welches unteranderem auch validierungs Möglichkeiten bietet. Dieses Plugin werden wir euch in Teil 4 “Übersicht über aktuelle jQuery-Plugins zum verarbeiten von Formulardaten per AJAX” näher vorstellen werden.

Sollte der ein oder andere von euch der Meinung sein wir hätten ein wirklich relevantes Plugin vergessen freuen wir uns immer über Kommentare oder eine E-Mail.

Auch wenn es in diesem Post eigentlich um Formulare mit jQuery geht möchte ich euch noch kurz ein validation-Script für MooTools vorstellen.
MooTools.Floor FormCheck. Dieses Plugin ist meiner Meinung nach eines der schönsten validierungs-Plugins die es moment gibt und ist unsere erste Wahl bei Projekten in denen wir MooTools nutzen.

Das Plugin beherrscht alle gänigen validierungs-Formen hat aber ein paar schöne Besonderheiten.
So erscheinen die Fehlermeldungen schön in Form von Tooltips am Formularelement.
Ausserdem slided das Plugin, auf Submit, die Seite an die Stelle an welcher der Fehler angezeigt wird.
Das ganze könnt ihr euch in dieser Demo anschauen.

Verpasst nicht die Folgeteile dieser Serie und aboniert unser RSS-Feed.

• Teil 1: Übersicht über aktuelle Form-Validaton Scripts.

Ähnliche Artikel

• 12. August 2009 -- jQuery Form Plugin – Do some AJAX magic easily
• 16. Mai 2009 -- Formulare mit jQuery – die umfassende Serie
• 19. November 2010 -- Praxistipp: Suchfeld leeren on focus (jQuery)

• Übersicht über aktuelle Form-Validaton Scripts.
• Überblick über die wichtigsten Funktionen die jQuery für die Validierung bietet.
• Tutorial “Eigenes Validation-Script mit jQuery erstellen”.
• Übersicht über aktuelle jQuery-Plugins zum verarbeiten von Formulardaten per AJAX.
• Tutorial “Eigenes jQuery-Plugin zum verarbeiten von Formulardaten per AJAX inkl. Dateiupload”.
• Überblick über die wichtigsten Funktionen die jQuery zum modifizieren von Formularen bietet.
• Übersicht zum Thema “customized Forms”. Schönere Formulare mit jQuery.
• Übersicht zum Thema “weiterführende Formulartechniken”.  Autocomplete, In Place Editing, Date Picker, ToolTips, doppeltes versenden verhindern und ein paar weitere Kleinigkeiten.

Zum Abschluss der Serie werden wir euch noch unser neues Formular-Plugin vorstellen an dem wir momentan mit Hochdruck arbeiten. Soviel vorab.

Heute wollen wir gleich mit Teil 1 – “Übersicht über aktuelle Form-Validaton Scripts“ beginnen.

Ähnliche Artikel

• 12. August 2009 -- jQuery Form Plugin – Do some AJAX magic easily
• 16. Mai 2009 -- jQuery Formulare validieren – Ein Überblick
• 14. Mai 2009 -- Ajax Datei-Upload mit jQuery

Auf was ihr allerdings achten solltet ist, dass die Dateien, die mit dem Plugin schon hochgeladen wurden, bevor der Submit abgesetzt, bzw. vor dem Abschicken des Formulars auf dem Server liegen, während die restlichen POST Daten eben erst auf Click eines Absenden Buttons an ein Skript weitergereicht werden. Kurz gesagt, wenn Upload mit Ajax und das Formular als Method Attribut GET/POST hat, muss man aufpassen. Das heißt es sollte überprüft werden ob die hochgeladenen Bilder auch tatsächlich genutzt werden und der User nicht nur einfach wild Dateien hochgeladen hat ohne Das Formular auszufüllen.

Screeshot der Demo:

Kurz zu den Bestandteilen des Codes:

- Der HTML Teil

1
2
3

 
<!-- Anlegen eines einfachen Divs auf das später die Upload Funktion gelegt wird -->
<div id="upload_button">Upload</div>

- Der Javascript Teil (weitere js-Dateien werden nicht benötigt)

1
2
3
4
5
6
7

 
<script src="ajaxupload.3.1.js" type="text/javascript">
<script type="text/javascript">
    $(document).ready( function() {
         new AjaxUpload('upload_button', {action: 'upload.php'});
    });
</script>

Der Ajaxupload kann auch durch Callback-Funktionen und andere Parameter eingestellt werden. Der Code auf der englischen Website ist selbsterklärend. Fragen könnt ihr auch hier stellen.

- Nach abesenden der Daten an “upload.php” geht es an die serverseite Verarbeitung

1
2
3
4
5
6
7
8
9
10
11

 
$uploaddir = '/var/www/uploads/';
$uploadfile = $uploaddir . basename($_FILES['userfile']['name']);
 
//move_uploaded_file ist die Standard PHP-Funktion um Dateien auf dem Server zu verarbeiten
if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {
  echo "success";
} else {
  // Als echo keinesfalls false benutzen. Führt zu Konflikten mit dem Ajax-Request
  echo "error";
}

Auf der Valums Website gibt es ebenfalls Beispiele für Ruby sowie Coldfusion.

Die Demo findet ihr hier

Ähnliche Artikel

• 12. August 2009 -- jQuery Form Plugin – Do some AJAX magic easily
• 16. Mai 2009 -- Formulare mit jQuery – die umfassende Serie
• 4. September 2009 -- Praxistip: Output Element des jQuery Validate Plugin ändern

In dem Artikel geht es darum was man beachten sollte um optimale Performance mit jQuery zu erzielen.
Es werden Themen wie warum man ID als selektor nutzen sollte, oder warum man besser Tags als Klassen nehmen sollte usw. angeschnitten.
jQuery Performance Rules

Ähnliche Artikel

• 1. Dezember 2010 -- jQuery Mobile – Der Seitenaufbau
• 25. November 2010 -- jQuery Mobile – Web-Apps mit jQuery
• 19. November 2010 -- Praxistipp: Suchfeld leeren on focus (jQuery)

So zunächste einmal der Standardaufbau in HTML für ein Formular.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<div class="block">
<div class="done">
<b>Vielen Dank. Wir haben Ihre Anfrage erhalten</b>
</div>
	<div class="myForm">
	<form method="post" action="saveData.php">
	<div class="input">
		<label>Name</label>
		<input type="text" name="name" class="text" />
	</div>
	<div class="input">
		<label>Email</label>
		<input type="text" name="email" class="text" />
	</div>
	<div class="input">
		<label>Kommentar</label>
		<textarea name="kommentar" class="text textarea" /></textarea>
	</div>
	<div class="input">
 
		<input type="submit" id="submit"/>
		<div class="loading_icon"></div>
	</div>
	</form>
	</div>
</div>
<div class="clear"></div>

Nichts besonderes. Jedes Input Feld ist noch mit einem beschreibenden Label versehen. Zur einfacheren Gestaltung sind die einzelnen inputs mit ihren Labeln in einem div gehüllt. Die Divs mit der Klasse “loading_icon” und “done” sind zum Startzeitpunkt unsichtbar.
Das CSS dazu könnte man so umsetzen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

body{
        text-align:center;
}
 
.loading_icon {
	float:right;
	background:url(ajax-loader.gif) no-repeat 1px;
	height:30px;
	width:30px;
	display:none;
}
.done {
	background:url(iconIdea.gif) no-repeat 2px;
	padding-left:20px;
	font-size:12px;
	width:70%;
	margin:20px auto;
	display:none
}
 
.clear {clear:both}
 
.block {
	width:400px;
	margin:0 auto;
	text-align:left;
}
.input * {
	padding:5px;
	margin:2px;
	font-size:12px;
}
.input label {
	float:left;
	width:75px;
	font-weight:700
}
.input input.text {
	float:left;
	width:270px;
	padding-left:20px;
}
.input .textarea {
	height:120px;
	width:270px;
	padding-left:20px;
}
 
.input #submit {
	float:right;
	margin-right:10px;
}

So. Nun können wir uns endlich um den AJAX-Request kümmern. Schauen wir uns an wie wir die Daten nun weiter verarbeiten und an das PHP-Skript weiterleiten.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

$(document).ready(function() {
  //click event für submit button
  ('#submit').click(function () {
 
  //Daten von den HTML Feldern in JS-Vars übersetzen
  var name = $('input[name=name]');
  var email = $('input[name=email]');
  var website = $('input[name=website]');
  var comment = $('textarea[name=comment]');
 
  //die Daten sollen per GET an das PHP Skript weitergeleitet werden. Dafür bauen wir einen 
  //String
  var data = 'name=' + name.val() + '&email=' + email.val()
  + '&comment='  + encodeURIComponent(kommentar.val());
 
  //alle Textfelder deaktivieren
  $('.text').attr('disabled','true');
 
  //Icon während des Requests einblenden
  $('.loading_icon').show();
 
  //Request abschicken
  $.ajax({
	//Ort des Skriptes in dem die per GET übertragenen Daten verarbeitet werden sollen
	url: "saveData.php",
	//Angabe der GET Methode, auch POST wäre möglich. Allerdings nur sinnvoll
        //bei größeren Datenmengen
	type: "GET",
	//Daten die gesendet werden sollen			
	data: data,
 
	//bei Antwort des Requests (Response)
	success: function (reqCode) {
	//wenn saveData.php true bzw. den Status 1 zurückliefert
		if (reqCode==1) {
			//verstecken des Formulars
			$('.form').fadeOut('slow');
			//anzeigen der Erfolgsmeldung
			$('.done').fadeIn('slow');
 
		//wenn der Request eine Form von false zurückschickt, Fehler ausgeben.
		} else{
                        alert('Fehler beim Abschicken des Formulares.');
                }
	}
});
 
	return false;
        //der return wird benötigt, damit das Formular nicht tatsächlich abgeschickt wird und         
        //sich nicht wie ein normales Form mit Seiten Refresh verhält.
	});
});

All magic is done …

Demo

Ähnliche Artikel

• 12. August 2009 -- jQuery Form Plugin – Do some AJAX magic easily
• 30. Juni 2009 -- jQuery myPass – password hiding iPhone-Style
• 16. Mai 2009 -- jQuery Formulare validieren – Ein Überblick

Deshalb möchte ich euch kurz uploadify vorstellen. Ein jQuery-Plugin welches zum einen leicht zu integrieren ist und zum anderen alles besitzt was man sich so wünscht.
Upload von einem odere mehreren Files, Ladebalken, und eine unglaubliche Anzahl von Einstellmöglichkeiten.

Der einzige Wehrmutstropfen, wenn überhaupt, ist die Tatsache das der Loader Flash benötigt.

Ein kleines Beispiel für die Implementierung:

1
2
3
4
5
6
7
8
9

$(document).ready(function() {
     $('#fileInput').fileUpload ({
          'uploader'  : 'uploader.swf',
          'script'    : 'upload.php',
          'cancelImg' : 'cancel.png',
          'auto'      : true,
          'folder'    : '/uploads'
     });
});

Eine Demo des ganzen findet man hier.

Ähnliche Artikel

• 16. Mai 2009 -- Formulare mit jQuery – die umfassende Serie
• 14. Mai 2009 -- Ajax Datei-Upload mit jQuery
• 8. Dezember 2009 -- jQuery load function – Ajax the simple way (Part 1)

Momentan liegt QFocuser in der Version 0.95 vor und läuft auf IE6/7, FF2/3, Safari, Webkit, Opera und Chorme.

Die wichtigsten Features von QFocuser im Überlick:

• erlaubt es dem Widget key events abzufangen wenn es den focus bekommt
• Der Fokus kann für jedes Element aktiviert werden
• löst focus und blur events aus (so das z.b. eine Tabellenzeile nicht länger gehighlighted bleibt wenn man ausserhalb der Tabelle klickt)
• Ermöglicht es das Widget über Tab anzusteuern

Eine Demo des ganzen findet man hier.

Beispielcode:

1
2
3
4
5
6
7
8

  var focuser = new QFocuser(widgetContainer, {
                onFocus: function(focusedEl) { .. add highlighted class or whatever }
                onBlur: function(focusedEl) { .. remove highlighted class or whatever }
        });
        // attach your own keys listeners
        $(focuser.getKeyListener()).addEvent('keydown', e.g. handleArrows);
        // when your widget decided to set the focus (and then receive key events)
        focuser.focus(tableRowForExample);

zu finden ist das gesamte Projekt bei Google Code.

Ähnliche Artikel

• 8. Dezember 2009 -- jQuery load function – Ajax the simple way (Part 1)
• 16. Oktober 2009 -- jQuery – Accessible-RIA – Widgets für jedermann
• 12. August 2009 -- jQuery Form Plugin – Do some AJAX magic easily