Ich wollte heute in einem Projekt einfach nur das Suchfeld, welches default als Wert “Suche” drin stehen hat, auf klick ins Feld leeren und, sollte der User nichts anderes eingegeben haben beim Verlassen das Feld wieder mit diesem Standardwert füllen.

Hier der Code:

1
2
3
4
5
6
7
8
9
10

$('.search').focus(function() {
	value=$(this).val();
	$(this).attr("value","");
});
 
$('.search').blur(function() {
	if($(this).val()=="") {
		$(this).val(value);
	}
});

Ich hoffe das hilft dem ein oder anderen…

Ähnliche Artikel

• 23. März 2010 -- Praxistipp – jqTransform Bug bei input in Firefox > 3.5.2
• 16. Oktober 2009 -- jQuery – Accessible-RIA – Widgets für jedermann
• 17. September 2009 -- jCryption – HTML-Form Encryption Plugin

Das ganze liegt an der neuen Render Engine die Firefox spendiert bekommen hat.
Um das Problem in den Griff zu bekommen, ohne sideeffects für andere Browser zu bekommen macht Ihr einfach folgendes.

Eure jqtransform.css auf, in Zeile 90 (.jqTransformInputInner div input {) änder Ihr die height jetzt von 31px auf auto.

Das war´s schon….

Ähnliche Artikel

• 24. Juni 2009 -- ifixpng2 & pngFix – Transparenz für den IE6
• 19. November 2010 -- Praxistipp: Suchfeld leeren on focus (jQuery)
• 16. Oktober 2009 -- Praxistipp – jqTransform width bug

Das ganze basiert auf jQuery UI und beinhaltete folgende Widgets:

• Lightbox (Demo)
• Formular (Demo)
• Tabs (Demo)
• sortierbare Tabellen (Demo)

Alle Infos zum Projekt, sowie Demos, Doku usw findet man im Wiki von github.

Ähnliche Artikel

• 19. November 2010 -- Praxistipp: Suchfeld leeren on focus (jQuery)
• 23. März 2010 -- Praxistipp – jqTransform Bug bei input in Firefox > 3.5.2
• 12. Juni 2009 -- Bessere Textfelder – prettyComments jQuery Plugin

Wer von euch, gerade im kommerziellen Bereich, sich mit der Sicherheit von Formularen auseinandersetzt wird das kennen.
Nicht jedes Webpaket des Providers hat SSL und wenn ja, so ist es nicht immer ganz einfach einzurichten.

Hier setzt jCryption an, welches als kleines einfach zu installierendes Plugin eine gewisse Grundsicherheit bei der Übermittlung von Formulardaten schaffen will.
jCryption ist sicher kein Ersatz für SSL aber gerade bei nicht 100% Sicherheitsrelevanten Dingen eine praktische Lösung.

jCryption verschlüsselt Daten Clientseitig und entschlüsselt diese anschließen auf dem Server (PHP).

Um das ganze zum laufen zu bringen müsst Ihr nichts weiter tun als die .js downloaden und einbinden und anschließend jCryption auf euer Formular aufzurufen.

1

$("#normal").jCryption();

Für weiter Infos, Beispiele, Doku usw besucht doch die offizielle Website.

Ähnliche Artikel

• 19. November 2010 -- Praxistipp: Suchfeld leeren on focus (jQuery)
• 4. September 2009 -- Praxistip: Output Element des jQuery Validate Plugin ändern
• 12. August 2009 -- jQuery Form Plugin – Do some AJAX magic easily

Schwieriger wird es schon wenn mehrere Plugins auf ein Formular angewendet werden, bei denen die Plugins eigene DOM-Elemente hinzufügen. Beispielsweise jqTransform

Glücklicherweise bietet das validate Plugin dafür eine wunderbare Funktion, nämlich errorPlacement.
Die Funktion sieht so aus:

1
2
3

 errorPlacement: function(error, element) {
     error.appendTo( element.TRAVERSINGFUNKTION );
   },

Nehmen wir ein Formular:

1
2
3
4
5
6
7

<form action="somescript.php" id="form" method="get">
   <input type="text" name="user">
   <label><label>
   <input type="text" name="pw">
   <label><label>
</form>
 <div id="error"></div>

Per Default wird vom validate Plugin ein Label-Tag hinter jedes input-Feld eingefügt. Will man nun den error an einer anderen Stelle zeigen kann man die Funktion folgendermaßen umschreiben:

1
2
3
4
5

$("#form").validate({
  errorPlacement: function(error, element) {
     error.appendTo( element.next() );
   }
});

Die Fehlermeldungen würde nun ausgehend vom input (element) in das nächste DOM Element, in unserem Fall das label-Tag, geschrieben werden.
Natürlich haben wir mit diesem Beispiel nur wieder das Ausgangsverhalten des Plugins erreicht. Dieses Prinzip lässt leicht auf komplexere Anwendungsfälle übertragen. Wie beispielsweise bei erwähntem jqTransform, bei dem um das input-Feld mehrere Divs gelegt werden. Die Fehlermeldung des Validate Plugins wird dann unterhalb (auf z-Ebene) der Felder angezeigt. Durch travesieren durch den DOM-Baum können die Fehlermeldungen beliebig positioniert werden.

Ähnliche Artikel

• 12. August 2009 -- jQuery Form Plugin – Do some AJAX magic easily
• 4. August 2009 -- Formularfelder vorausfüllen und leeren mit jQuery Clearfield
• 30. Juni 2009 -- jQuery myPass – password hiding iPhone-Style

Mitentwickelt wurde es von John Resig, einem der Urväter von jQuery.

Es überzeugt durch seine Funktionsvielfalt, sowie seine einfache Umsetzung. Es genügt ein Standard HTML Formular zu schreiben und danach das Plugin mit den gewünschten Optionen aufzurufen.
Das könnte dann wie folgt aussehen:

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

<head>
    <script type="text/javascript" src="path/to/jquery.js"></script>
    <script type="text/javascript" src="path/to/form.js"></script>
 
    <script type="text/javascript">
        $(document).ready(function() {
            // bind 'myForm' and provide a simple callback function 
            $('#myForm').ajaxForm(function() {
                alert("Formular wurde gesendet!");
            });
        });
    </script>
</head>
<body>
<form id="myForm" action="comment.php" method="post">
    Name: <input type="text" name="name" />
    Kommentar: <textarea name="kommentar"></textarea>
    <input type="submit" value="Abschicken" />
</form>
</body>

Dieses Beispiel sendet die beiden Formularfelder Name und Kommentar als Ajax Request an das im form-tag angegebene Skript.
Dies ist nur ein einfaches Beispiel. Weiterhin gibt es noch Methoden zur Formularberarbeitung wie reset, manueller submit, Erstellung eines querystring, etc.

Das Plugin besitzt auch noch einige Optionen. Ein Auszug daraus:

• target
• url
• success
• …

Altgedienten Ajaxianer sollten diese Parameter bekannt sein. Benutzt werden sie dann so:

1
2
3
4
5
6
7
8
9
10
11

// Optionobjekt mit gesetzten Attributen
var options = {
    target:     '#divToUpdate',
    url:        'comment.php',
    success:    function() {
        alert('Erfolgreich abgeschickt!');
    }
};
 
// Options einfach der Mehthode ajaxForm als Parameter übergeben
$('#myForm').ajaxForm(options);

Einfacher lässt sich ein Ajaxformular kaum umsetzen. Also viel Spaß beim Testen. Zu finden ist das Ganze in englischer Doku und kleinen Beispielen bei Malsup.

Ähnliche Artikel

• 4. September 2009 -- Praxistip: Output Element des jQuery Validate Plugin ändern
• 4. August 2009 -- Formularfelder vorausfüllen und leeren mit jQuery Clearfield
• 30. Juni 2009 -- jQuery myPass – password hiding iPhone-Style

Das ganze kann man jetzt sehr elegant und einfach mit diesem kleinen jQuery Plugin lösen.

Datei einbinden

1

<input type="text" class="clearField" value="What's your name?" />

Funktion hinzufügen

1
2
3
4
5
6

$(document).ready(function() {
	$('.clearField').clearField({
		blurClass: 'myBlurredClass',
		activeClass: 'myActiveClass'
	});
});

und das input Field entsprechend einbinden.

1

<input type="text" class="clearField" value="What's your name?" />

Fertig!

Alle Dateien zum Downlad findet Ihr auf der offiziellen Plugin Seite.

Ähnliche Artikel

• 4. September 2009 -- Praxistip: Output Element des jQuery Validate Plugin ändern
• 12. August 2009 -- jQuery Form Plugin – Do some AJAX magic easily
• 30. Juni 2009 -- jQuery myPass – password hiding iPhone-Style

About

Neulich abend saß ich auf dem Sofa und wollte mich über mein iPhone bei Facebook anmelden, bei der Eingabe meines Passwortes fiel mir wieder dieses kleine Detail auf, welches die Eingabe des Passwortes doch etwas angenehmer macht.

Der ein oder andere iPhone-Besitzer weiß wovon ich rede. Davon das im Eingabefeld immer für kurze Zeit der zuletzt eingegeben Buchstabe des Passworts zu sehen ist, was dem User doch mehr Sicherheit gibt das seine Eingabe korrekt war.

Ich dachte mir sowas könnte auch für normale Formulare ganz schön sein und deshalb haben wir ein kleines jQuery-Plugin geschrieben welches dieses Verhalten imitiert.

How to use

jQuery myPass nutzt die jQuery Javascript library.

Ihr müsst nur die beiden Dateien in eueren Header einbinden.

1
2

<script src="_js/jquery.js" type="text/javascript"></script>
<script src="_js/jquery.myPass-1.0.js" type="text/javascript"></script>

Options

Um das Plugin zu aktivieren und einzustellen müsst Ihr nun nur noch folgendes in euren Header schreiben

1
2
3
4
5

	$('.myTextField').myPass({
			charReplace : '%u2665',
			charDuration : 1000
 
	});

• charReplace: Hiermit könnt Ihr einstellen durch welches Zeichen die Buchstaben ersetzt werden sollen.Als default ist der Standard-Punkt eingestellt. Weitere Zeichen findet Ihr hier.Nehmt einfach die letzten 4 Zahlen des Unicode und setzt %u davor. z.B. charReplace : ‘%u2665′ um statt dem • ein ♥ zu verwenden.
• charDuration: Hiermit könnt Ihr einstellen wie lange das letzte Zeichen angezeigt werden soll.

HTML

Im HTML-Teil eurer Seite legt Ihr nun einfach ein ganz normales Textfeld an, gebt diesem einen Namen und die Klasse welche Ihr oben eingetragen habt.

In diesem fall .myTextField.

1
2
3
4

<form action="test.php" method="post">
<input class="myTextField" name="password" type="text" />
<input name="Send" type="submit" value="submit" />
</form>

Nach dem senden des Formulars könnt Ihr eure Daten ganz einfach z.B. über PHP verarbeiten.

1

echo $_POST['password'];

Download & Demo

Demonstration – Plugin in Action

Download – Alle Dateien zum Download

Ähnliche Artikel

• 4. September 2009 -- Praxistip: Output Element des jQuery Validate Plugin ändern
• 12. August 2009 -- jQuery Form Plugin – Do some AJAX magic easily
• 4. August 2009 -- Formularfelder vorausfüllen und leeren mit jQuery Clearfield

Das Einbinden ist denkbar einfach:

1
2
3
4
5
6
7
8
9
10

//einbinden der Bibliotheken
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/prettyComments.js" type="text/javascript"></script>
 
//Initialisiere Plugin nach dem der DOM-Baum vollständig geladen ist
<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){
		$('#textarea').prettyComments();
	});
</script>

Das Plugin hat folgende Attribute:

• animate: true/false
• animationSpeed: ‘slow’/'normal’/'fast’
• maxHeight: 500 (ab dieser Höhe erscheint Scrollbalken)

Ein Beispiel dazu:

1
2
3
4
5

<script type="text/javascript">
	$(document).ready(function(){
		$('#textarea1').prettyComments({animate: true, maxHeight:100});
	});
</script>

Ähnliche Artikel

• 23. März 2010 -- Praxistipp – jqTransform Bug bei input in Firefox > 3.5.2
• 16. Oktober 2009 -- jQuery – Accessible-RIA – Widgets für jedermann
• 4. September 2009 -- Praxistip: Output Element des jQuery Validate Plugin ändern

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)