<?xml version="1.0" encoding="UTF-8"?> <rss
version="2.0"
xmlns:content="http://purl.org/rss/1.0/modules/content/"
xmlns:wfw="http://wellformedweb.org/CommentAPI/"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:atom="http://www.w3.org/2005/Atom"
xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
> <channel><title>mysrc.de &#187; Forms</title> <atom:link href="http://www.mysrc.de/tag/forms/feed/" rel="self" type="application/rss+xml" /><link>http://www.mysrc.de</link> <description>- jQuery, MooTools, HTML5, AJAX</description> <lastBuildDate>Tue, 14 Jun 2011 08:24:25 +0000</lastBuildDate> <language>en</language> <sy:updatePeriod>hourly</sy:updatePeriod> <sy:updateFrequency>1</sy:updateFrequency> <generator>http://wordpress.org/?v=3.0.1</generator> <item><title>Praxistipp: Suchfeld leeren on focus (jQuery)</title><link>http://www.mysrc.de/jquery/praxistipp-suchfeld-leeren-on-focus-jquery/</link> <comments>http://www.mysrc.de/jquery/praxistipp-suchfeld-leeren-on-focus-jquery/#comments</comments> <pubDate>Fri, 19 Nov 2010 12:52:24 +0000</pubDate> <dc:creator>Oliver Storm</dc:creator> <category><![CDATA[jQuery]]></category> <category><![CDATA[Best Practice]]></category> <category><![CDATA[Forms]]></category> <category><![CDATA[Formulare]]></category> <category><![CDATA[Suche]]></category> <guid
isPermaLink="false">http://www.mysrc.de/?p=1139</guid> <description><![CDATA[Gestern hatte ich wieder diesen Fall&#8230;. Man hat´s schon x-mal gemacht, aber immer wenn man es wieder braucht findet man das code-schnippselchen nicht. Ich wollte heute in einem Projekt einfach nur das Suchfeld, welches default als Wert &#8220;Suche&#8221; drin stehen hat, auf klick ins Feld leeren und, sollte der User nichts anderes eingegeben haben beim [...]]]></description> <content:encoded><![CDATA[<p>Gestern hatte ich wieder diesen Fall&#8230;.<br
/> Man hat´s schon x-mal gemacht, aber immer wenn man es wieder braucht findet man das code-schnippselchen nicht.</p><p>Ich wollte heute in einem Projekt einfach nur das <strong>Suchfeld</strong>, welches default als Wert &#8220;Suche&#8221; drin stehen hat, auf klick ins Feld <strong>leeren </strong>und, sollte der User nichts anderes eingegeben haben beim Verlassen das Feld wieder mit diesem Standardwert füllen.</p><p>Hier der Code:</p><div
class="wp_codebox_msgheader"><span
class="right"><sup><a
href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span
style="color: #99cc00">?</span></a></sup></span><span
class="left"><a
href="javascript:;" onclick="javascript:showCodeTxt('p1139code2'); return false;">View Code</a> JAVASCRIPT</span><div
class="codebox_clear"></div></div><div
class="wp_codebox"><table><tr
id="p11392"><td
class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
</pre></td><td
class="code" id="p1139code2"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.search'</span><span style="color: #009900;">&#41;</span>.<span style="color: #000066;">focus</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	value<span style="color: #339933;">=</span>$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;value&quot;</span><span style="color: #339933;">,</span><span style="color: #3366CC;">&quot;&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.search'</span><span style="color: #009900;">&#41;</span>.<span style="color: #000066;">blur</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">==</span><span style="color: #3366CC;">&quot;&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span>value<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div><p>Ich hoffe das hilft dem ein oder anderen&#8230;</p><h3  class="related_post_title">Ähnliche Artikel</h3><ul
class="related_post"><li>23. März 2010 -- <a
href="http://www.mysrc.de/jquery/praxistipp-%e2%80%93-jqtransform-bug-bei-input-in-firefox-3-5-2/" title="Praxistipp – jqTransform Bug bei input in Firefox > 3.5.2">Praxistipp – jqTransform Bug bei input in Firefox > 3.5.2</a></li><li>16. Oktober 2009 -- <a
href="http://www.mysrc.de/jquery/jquery-accessible-ria-widgets-fur-jedermann/" title="jQuery &#8211; Accessible-RIA &#8211; Widgets für jedermann">jQuery &#8211; Accessible-RIA &#8211; Widgets für jedermann</a></li><li>17. September 2009 -- <a
href="http://www.mysrc.de/jquery/jcryption-html-form-encryption-plugin/" title="jCryption &#8211; HTML-Form Encryption Plugin">jCryption &#8211; HTML-Form Encryption Plugin</a></li></ul>]]></content:encoded> <wfw:commentRss>http://www.mysrc.de/jquery/praxistipp-suchfeld-leeren-on-focus-jquery/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>jCryption &#8211; HTML-Form Encryption Plugin</title><link>http://www.mysrc.de/jquery/jcryption-html-form-encryption-plugin/</link> <comments>http://www.mysrc.de/jquery/jcryption-html-form-encryption-plugin/#comments</comments> <pubDate>Thu, 17 Sep 2009 08:34:17 +0000</pubDate> <dc:creator>Oliver Storm</dc:creator> <category><![CDATA[jQuery]]></category> <category><![CDATA[Forms]]></category> <category><![CDATA[Formulare]]></category> <guid
isPermaLink="false">http://www.mysrc.de/?p=879</guid> <description><![CDATA[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 [...]]]></description> <content:encoded><![CDATA[<p><img
class="alignnone size-full wp-image-880" title="jcryption" src="http://www.mysrc.de/wp-content/uploads/2009/09/jcryption.jpg" alt="jcryption" width="480" height="88" /></p><p>Wer von euch, gerade im kommerziellen Bereich, sich mit der <strong>Sicherheit von Formularen</strong> auseinandersetzt wird das kennen.<br
/> Nicht jedes Webpaket des Providers hat SSL und wenn ja, so ist es nicht immer ganz einfach einzurichten.</p><p>Hier setzt <strong>jCryption</strong> an, welches als kleines einfach zu installierendes Plugin eine gewisse Grundsicherheit bei der Übermittlung von Formulardaten schaffen will.<br
/> jCryption ist sicher kein Ersatz für SSL aber gerade bei nicht 100% Sicherheitsrelevanten Dingen eine praktische Lösung.</p><p>jCryption verschlüsselt Daten Clientseitig und entschlüsselt diese anschließen auf dem Server (PHP).</p><p>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.</p><div
class="wp_codebox_msgheader"><span
class="right"><sup><a
href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span
style="color: #99cc00">?</span></a></sup></span><span
class="left"><a
href="javascript:;" onclick="javascript:showCodeTxt('p879code4'); return false;">View Code</a> JAVASCRIPT</span><div
class="codebox_clear"></div></div><div
class="wp_codebox"><table><tr
id="p8794"><td
class="line_numbers"><pre>1
</pre></td><td
class="code" id="p879code4"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#normal&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">jCryption</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div><p>Für weiter Infos, Beispiele, Doku usw besucht doch die <a
title="jCryption - JavaScript data encryption" href="http://www.jcryption.org/" target="_blank">offizielle Website.</a></p><h3  class="related_post_title">Ähnliche Artikel</h3><ul
class="related_post"><li>19. November 2010 -- <a
href="http://www.mysrc.de/jquery/praxistipp-suchfeld-leeren-on-focus-jquery/" title="Praxistipp: Suchfeld leeren on focus (jQuery)">Praxistipp: Suchfeld leeren on focus (jQuery)</a></li><li>4. September 2009 -- <a
href="http://www.mysrc.de/jquery/praxistip-output-element-des-jquery-validate-plugin-andern/" title="Praxistip: Output Element des jQuery Validate Plugin ändern">Praxistip: Output Element des jQuery Validate Plugin ändern</a></li><li>12. August 2009 -- <a
href="http://www.mysrc.de/jquery/jquery-form-plugin-do-some-ajax-magic-easily/" title="jQuery Form Plugin &#8211; Do some AJAX magic easily">jQuery Form Plugin &#8211; Do some AJAX magic easily</a></li></ul>]]></content:encoded> <wfw:commentRss>http://www.mysrc.de/jquery/jcryption-html-form-encryption-plugin/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>Praxistip: Output Element des jQuery Validate Plugin ändern</title><link>http://www.mysrc.de/jquery/praxistip-output-element-des-jquery-validate-plugin-andern/</link> <comments>http://www.mysrc.de/jquery/praxistip-output-element-des-jquery-validate-plugin-andern/#comments</comments> <pubDate>Fri, 04 Sep 2009 19:32:05 +0000</pubDate> <dc:creator>Stefan Huissel</dc:creator> <category><![CDATA[jQuery]]></category> <category><![CDATA[fehlersuche]]></category> <category><![CDATA[Forms]]></category> <category><![CDATA[Formulare]]></category> <category><![CDATA[Plugin]]></category> <guid
isPermaLink="false">http://www.mysrc.de/?p=854</guid> <description><![CDATA[Das allseits bekannte jQuery Plugin um Formularfelder zu validieren funktioniert im Standardszenarion sogut wie problemlos. 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: ?View Code JAVASCRIPT1 [...]]]></description> <content:encoded><![CDATA[<p>Das allseits bekannte <a
href="http://docs.jquery.com/Plugins/Validation" target="blank">jQuery Plugin</a> um <a
href="http://www.mysrc.de/jquery/jquery-formulare-validieren-ein-uberblick/">Formularfelder zu validieren</a> funktioniert im Standardszenarion sogut wie problemlos.</p><p>Schwieriger wird es schon wenn <strong>mehrere Plugins</strong> auf ein Formular angewendet werden, bei denen die Plugins eigene DOM-Elemente hinzufügen. Beispielsweise <a
href="http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/" target="blank">jqTransform</a></p><p>Glücklicherweise bietet das validate Plugin dafür eine wunderbare Funktion, nämlich <strong>errorPlacement</strong>.<br
/> Die Funktion sieht so aus:</p><div
class="wp_codebox_msgheader"><span
class="right"><sup><a
href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span
style="color: #99cc00">?</span></a></sup></span><span
class="left"><a
href="javascript:;" onclick="javascript:showCodeTxt('p854code8'); return false;">View Code</a> JAVASCRIPT</span><div
class="codebox_clear"></div></div><div
class="wp_codebox"><table><tr
id="p8548"><td
class="line_numbers"><pre>1
2
3
</pre></td><td
class="code" id="p854code8"><pre class="javascript" style="font-family:monospace;"> errorPlacement<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>error<span style="color: #339933;">,</span> element<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
     error.<span style="color: #660066;">appendTo</span><span style="color: #009900;">&#40;</span> element.<span style="color: #660066;">TRAVERSINGFUNKTION</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
   <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span></pre></td></tr></table></div><p>Nehmen wir ein Formular:</p><div
class="wp_codebox_msgheader"><span
class="right"><sup><a
href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span
style="color: #99cc00">?</span></a></sup></span><span
class="left"><a
href="javascript:;" onclick="javascript:showCodeTxt('p854code9'); return false;">View Code</a> HTML</span><div
class="codebox_clear"></div></div><div
class="wp_codebox"><table><tr
id="p8549"><td
class="line_numbers"><pre>1
2
3
4
5
6
7
</pre></td><td
class="code" id="p854code9"><pre class="html" style="font-family:monospace;">&lt;form action=&quot;somescript.php&quot; id=&quot;form&quot; method=&quot;get&quot;&gt;
   &lt;input type=&quot;text&quot; name=&quot;user&quot;&gt;
   &lt;label&gt;&lt;label&gt;
   &lt;input type=&quot;text&quot; name=&quot;pw&quot;&gt;
   &lt;label&gt;&lt;label&gt;
&lt;/form&gt;
 &lt;div id=&quot;error&quot;&gt;&lt;/div&gt;</pre></td></tr></table></div><p>Per Default wird vom validate Plugin ein Label-Tag hinter jedes input-Feld eingefügt. Will man nun den error an einer <strong>anderen Stelle zeigen</strong> kann man die Funktion folgendermaßen umschreiben:</p><div
class="wp_codebox_msgheader"><span
class="right"><sup><a
href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span
style="color: #99cc00">?</span></a></sup></span><span
class="left"><a
href="javascript:;" onclick="javascript:showCodeTxt('p854code10'); return false;">View Code</a> JAVASCRIPT</span><div
class="codebox_clear"></div></div><div
class="wp_codebox"><table><tr
id="p85410"><td
class="line_numbers"><pre>1
2
3
4
5
</pre></td><td
class="code" id="p854code10"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#form&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">validate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
  errorPlacement<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>error<span style="color: #339933;">,</span> element<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
     error.<span style="color: #660066;">appendTo</span><span style="color: #009900;">&#40;</span> element.<span style="color: #660066;">next</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
   <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div><p>Die Fehlermeldungen würde nun <strong>ausgehend vom input</strong> (element) in das <strong>nächste DOM Element</strong>, in unserem Fall das label-Tag, <strong>geschrieben </strong>werden.<br
/> 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.</p><h3  class="related_post_title">Ähnliche Artikel</h3><ul
class="related_post"><li>12. August 2009 -- <a
href="http://www.mysrc.de/jquery/jquery-form-plugin-do-some-ajax-magic-easily/" title="jQuery Form Plugin &#8211; Do some AJAX magic easily">jQuery Form Plugin &#8211; Do some AJAX magic easily</a></li><li>4. August 2009 -- <a
href="http://www.mysrc.de/jquery/formularfelder-vorausfullen-und-leeren-mit-jquery-clearfield/" title="Formularfelder vorausfüllen und leeren mit jQuery Clearfield">Formularfelder vorausfüllen und leeren mit jQuery Clearfield</a></li><li>30. Juni 2009 -- <a
href="http://www.mysrc.de/allgemein/jquery-mypass-password-hiding-iphone-style/" title="jQuery myPass &#8211; password hiding iPhone-Style">jQuery myPass &#8211; password hiding iPhone-Style</a></li></ul>]]></content:encoded> <wfw:commentRss>http://www.mysrc.de/jquery/praxistip-output-element-des-jquery-validate-plugin-andern/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>jQuery Form Plugin &#8211; Do some AJAX magic easily</title><link>http://www.mysrc.de/jquery/jquery-form-plugin-do-some-ajax-magic-easily/</link> <comments>http://www.mysrc.de/jquery/jquery-form-plugin-do-some-ajax-magic-easily/#comments</comments> <pubDate>Wed, 12 Aug 2009 15:33:54 +0000</pubDate> <dc:creator>Stefan Huissel</dc:creator> <category><![CDATA[Plugins]]></category> <category><![CDATA[jQuery]]></category> <category><![CDATA[AJAX]]></category> <category><![CDATA[Forms]]></category> <category><![CDATA[Formulare]]></category> <category><![CDATA[Plugin]]></category> <guid
isPermaLink="false">http://www.mysrc.de/?p=840</guid> <description><![CDATA[Neulich bin ich über ein Plugin gestoßen, dass Entwicklern auf einfachstem Wege die Möglichkeit bietet ihre Formulare AJAX gestützt umzusetzen. 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 [...]]]></description> <content:encoded><![CDATA[<p>Neulich bin ich über ein Plugin gestoßen, dass Entwicklern auf einfachstem Wege die Möglichkeit bietet ihre<strong> Formulare AJAX gestützt</strong> umzusetzen.</p><p><a
href="http://malsup.com/jquery/form/"><img
src="http://www.mysrc.de/wp-content/uploads/2009/08/form_plugin1.jpg" alt="form_plugin" title="form_plugin" width="500" height="150" class="alignnone size-full wp-image-843" /></a></p><p>Mitentwickelt wurde es von <a
href="http://ejohn.org/">John Resig</a>, einem der Urväter von jQuery.</p><p>Es überzeugt durch seine <strong>Funktionsvielfalt</strong>, sowie seine einfache Umsetzung. Es genügt ein Standard HTML Formular zu schreiben und danach das Plugin mit den gewünschten Optionen aufzurufen.<br
/> Das könnte dann wie folgt aussehen:</p><div
class="wp_codebox_msgheader"><span
class="right"><sup><a
href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span
style="color: #99cc00">?</span></a></sup></span><span
class="left"><a
href="javascript:;" onclick="javascript:showCodeTxt('p840code13'); return false;">View Code</a> JAVASCRIPT</span><div
class="codebox_clear"></div></div><div
class="wp_codebox"><table><tr
id="p84013"><td
class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
</pre></td><td
class="code" id="p840code13"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>head<span style="color: #339933;">&gt;</span>
    <span style="color: #339933;">&lt;</span>script type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;text/javascript&quot;</span> src<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;path/to/jquery.js&quot;</span><span style="color: #339933;">&gt;&lt;/</span>script<span style="color: #339933;">&gt;</span>
    <span style="color: #339933;">&lt;</span>script type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;text/javascript&quot;</span> src<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;path/to/form.js&quot;</span><span style="color: #339933;">&gt;&lt;/</span>script<span style="color: #339933;">&gt;</span>
&nbsp;
    <span style="color: #339933;">&lt;</span>script type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;text/javascript&quot;</span><span style="color: #339933;">&gt;</span>
        $<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            <span style="color: #006600; font-style: italic;">// bind 'myForm' and provide a simple callback function </span>
            $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#myForm'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ajaxForm</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Formular wurde gesendet!&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #339933;">&lt;/</span>script<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;/</span>head<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>body<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>form id<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;myForm&quot;</span> action<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;comment.php&quot;</span> method<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;post&quot;</span><span style="color: #339933;">&gt;</span>
    <span style="color: #000066;">Name</span><span style="color: #339933;">:</span> <span style="color: #339933;">&lt;</span>input type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;text&quot;</span> <span style="color: #000066;">name</span><span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;name&quot;</span> <span style="color: #339933;">/&gt;</span>
    Kommentar<span style="color: #339933;">:</span> <span style="color: #339933;">&lt;</span>textarea <span style="color: #000066;">name</span><span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;kommentar&quot;</span><span style="color: #339933;">&gt;&lt;/</span>textarea<span style="color: #339933;">&gt;</span>
    <span style="color: #339933;">&lt;</span>input type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;submit&quot;</span> value<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;Abschicken&quot;</span> <span style="color: #339933;">/&gt;</span>
<span style="color: #339933;">&lt;/</span>form<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;/</span>body<span style="color: #339933;">&gt;</span></pre></td></tr></table></div><p>Dieses Beispiel sendet die beiden Formularfelder Name und Kommentar <strong>als Ajax Request</strong> an das im form-tag angegebene Skript.<br
/> Dies ist nur ein einfaches Beispiel. Weiterhin gibt es noch Methoden zur Formularberarbeitung wie <strong>reset, manueller submit, Erstellung eines querystring, etc.</strong></p><p>Das Plugin besitzt auch noch einige Optionen. Ein Auszug daraus:</p><ul><li>target</li><li>url</li><li>success</li><li>&#8230;</li></ul><p>Altgedienten Ajaxianer sollten diese Parameter bekannt sein. Benutzt werden sie dann so:</p><div
class="wp_codebox_msgheader"><span
class="right"><sup><a
href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span
style="color: #99cc00">?</span></a></sup></span><span
class="left"><a
href="javascript:;" onclick="javascript:showCodeTxt('p840code14'); return false;">View Code</a> JAVASCRIPT</span><div
class="codebox_clear"></div></div><div
class="wp_codebox"><table><tr
id="p84014"><td
class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
</pre></td><td
class="code" id="p840code14"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">// Optionobjekt mit gesetzten Attributen</span>
<span style="color: #003366; font-weight: bold;">var</span> options <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span>
    target<span style="color: #339933;">:</span>     <span style="color: #3366CC;">'#divToUpdate'</span><span style="color: #339933;">,</span>
    url<span style="color: #339933;">:</span>        <span style="color: #3366CC;">'comment.php'</span><span style="color: #339933;">,</span>
    success<span style="color: #339933;">:</span>    <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'Erfolgreich abgeschickt!'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #006600; font-style: italic;">// Options einfach der Mehthode ajaxForm als Parameter übergeben</span>
$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#myForm'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ajaxForm</span><span style="color: #009900;">&#40;</span>options<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div><p>Einfacher lässt sich <strong>ein Ajaxformular</strong> kaum umsetzen. Also viel Spaß beim Testen. Zu finden ist das Ganze in englischer Doku und kleinen Beispielen bei <a
href="http://malsup.com/jquery/form">Malsup</a>.</p><h3  class="related_post_title">Ähnliche Artikel</h3><ul
class="related_post"><li>4. September 2009 -- <a
href="http://www.mysrc.de/jquery/praxistip-output-element-des-jquery-validate-plugin-andern/" title="Praxistip: Output Element des jQuery Validate Plugin ändern">Praxistip: Output Element des jQuery Validate Plugin ändern</a></li><li>4. August 2009 -- <a
href="http://www.mysrc.de/jquery/formularfelder-vorausfullen-und-leeren-mit-jquery-clearfield/" title="Formularfelder vorausfüllen und leeren mit jQuery Clearfield">Formularfelder vorausfüllen und leeren mit jQuery Clearfield</a></li><li>30. Juni 2009 -- <a
href="http://www.mysrc.de/allgemein/jquery-mypass-password-hiding-iphone-style/" title="jQuery myPass &#8211; password hiding iPhone-Style">jQuery myPass &#8211; password hiding iPhone-Style</a></li></ul>]]></content:encoded> <wfw:commentRss>http://www.mysrc.de/jquery/jquery-form-plugin-do-some-ajax-magic-easily/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>Formularfelder vorausfüllen und leeren mit jQuery Clearfield</title><link>http://www.mysrc.de/jquery/formularfelder-vorausfullen-und-leeren-mit-jquery-clearfield/</link> <comments>http://www.mysrc.de/jquery/formularfelder-vorausfullen-und-leeren-mit-jquery-clearfield/#comments</comments> <pubDate>Tue, 04 Aug 2009 07:50:57 +0000</pubDate> <dc:creator>Oliver Storm</dc:creator> <category><![CDATA[jQuery]]></category> <category><![CDATA[Forms]]></category> <category><![CDATA[Formulare]]></category> <category><![CDATA[Plugin]]></category> <guid
isPermaLink="false">http://www.mysrc.de/?p=818</guid> <description><![CDATA[Nur kurz möchte ich dieses kleine Plugin hier erwähnen. Gerade bei Suchfeldern kennt man es das im Feld  &#8220;Suche:&#8221; steht und verschwindet sobald das Feld den Focus bekommt. Das ganze kann man jetzt sehr elegant und einfach mit diesem kleinen jQuery Plugin lösen. Datei einbinden ?View Code HTML1 &#60;input type=&#34;text&#34; class=&#34;clearField&#34; value=&#34;What's your name?&#34; /&#62; [...]]]></description> <content:encoded><![CDATA[<p>Nur kurz möchte ich dieses kleine Plugin hier erwähnen.<br
/> Gerade bei Suchfeldern kennt man es das im Feld  &#8220;Suche:&#8221; steht und verschwindet sobald das Feld den Focus bekommt.</p><p>Das ganze kann man jetzt sehr elegant und einfach mit diesem kleinen <strong>jQuery Plugin</strong> lösen.</p><p>Datei einbinden</p><div
class="wp_codebox_msgheader"><span
class="right"><sup><a
href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span
style="color: #99cc00">?</span></a></sup></span><span
class="left"><a
href="javascript:;" onclick="javascript:showCodeTxt('p818code18'); return false;">View Code</a> HTML</span><div
class="codebox_clear"></div></div><div
class="wp_codebox"><table><tr
id="p81818"><td
class="line_numbers"><pre>1
</pre></td><td
class="code" id="p818code18"><pre class="html" style="font-family:monospace;">&lt;input type=&quot;text&quot; class=&quot;clearField&quot; value=&quot;What's your name?&quot; /&gt;</pre></td></tr></table></div><p>Funktion hinzufügen</p><div
class="wp_codebox_msgheader"><span
class="right"><sup><a
href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span
style="color: #99cc00">?</span></a></sup></span><span
class="left"><a
href="javascript:;" onclick="javascript:showCodeTxt('p818code19'); return false;">View Code</a> JAVASCRIPT</span><div
class="codebox_clear"></div></div><div
class="wp_codebox"><table><tr
id="p81819"><td
class="line_numbers"><pre>1
2
3
4
5
6
</pre></td><td
class="code" id="p818code19"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.clearField'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">clearField</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
		blurClass<span style="color: #339933;">:</span> <span style="color: #3366CC;">'myBlurredClass'</span><span style="color: #339933;">,</span>
		activeClass<span style="color: #339933;">:</span> <span style="color: #3366CC;">'myActiveClass'</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div><p>und das input Field entsprechend einbinden.</p><div
class="wp_codebox_msgheader"><span
class="right"><sup><a
href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span
style="color: #99cc00">?</span></a></sup></span><span
class="left"><a
href="javascript:;" onclick="javascript:showCodeTxt('p818code20'); return false;">View Code</a> HTML</span><div
class="codebox_clear"></div></div><div
class="wp_codebox"><table><tr
id="p81820"><td
class="line_numbers"><pre>1
</pre></td><td
class="code" id="p818code20"><pre class="html" style="font-family:monospace;">&lt;input type=&quot;text&quot; class=&quot;clearField&quot; value=&quot;What's your name?&quot; /&gt;</pre></td></tr></table></div><p>Fertig!</p><p>Alle Dateien zum Downlad findet Ihr auf der <a
title="JQUERY PLUGIN: CLEARFIELD" href="http://labs.thesedays.com/projects/jquery/clearfield/" target="_blank">offiziellen Plugin Seite</a>.</p><h3  class="related_post_title">Ähnliche Artikel</h3><ul
class="related_post"><li>4. September 2009 -- <a
href="http://www.mysrc.de/jquery/praxistip-output-element-des-jquery-validate-plugin-andern/" title="Praxistip: Output Element des jQuery Validate Plugin ändern">Praxistip: Output Element des jQuery Validate Plugin ändern</a></li><li>12. August 2009 -- <a
href="http://www.mysrc.de/jquery/jquery-form-plugin-do-some-ajax-magic-easily/" title="jQuery Form Plugin &#8211; Do some AJAX magic easily">jQuery Form Plugin &#8211; Do some AJAX magic easily</a></li><li>30. Juni 2009 -- <a
href="http://www.mysrc.de/allgemein/jquery-mypass-password-hiding-iphone-style/" title="jQuery myPass &#8211; password hiding iPhone-Style">jQuery myPass &#8211; password hiding iPhone-Style</a></li></ul>]]></content:encoded> <wfw:commentRss>http://www.mysrc.de/jquery/formularfelder-vorausfullen-und-leeren-mit-jquery-clearfield/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>jQuery myPass &#8211; password hiding iPhone-Style</title><link>http://www.mysrc.de/allgemein/jquery-mypass-password-hiding-iphone-style/</link> <comments>http://www.mysrc.de/allgemein/jquery-mypass-password-hiding-iphone-style/#comments</comments> <pubDate>Tue, 30 Jun 2009 13:10:25 +0000</pubDate> <dc:creator>Oliver Storm</dc:creator> <category><![CDATA[Allgemein]]></category> <category><![CDATA[Plugins]]></category> <category><![CDATA[jQuery]]></category> <category><![CDATA[Forms]]></category> <category><![CDATA[Formulare]]></category> <category><![CDATA[Plugin]]></category> <category><![CDATA[Tutorial]]></category> <guid
isPermaLink="false">http://www.mysrc.de/?p=765</guid> <description><![CDATA[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 [...]]]></description> <content:encoded><![CDATA[<p><img
class="alignnone size-full wp-image-727" title="nicePass - jQuery Plugin" src="http://www.mysrc.de/wp-content/uploads/2009/06/nicepass.jpg" alt="nicePass - jQuery Plugin" width="460" height="186" /></p><h3>About</h3><p>Neulich abend saß ich auf dem Sofa und wollte mich über mein iPhone bei <a
title="Facebook - Oliver Storm" href="http://www.facebook.com/storm.oliver" target="_blank">Facebook</a> anmelden, bei der Eingabe meines Passwortes fiel mir wieder dieses kleine Detail auf, welches die Eingabe des Passwortes doch etwas angenehmer macht.</p><p>Der ein oder andere iPhone-Besitzer weiß wovon ich rede. Davon das im Eingabefeld immer für kurze Zeit der <strong>zuletzt eingegeben Buchstabe des Passworts</strong> zu sehen ist, was dem User doch mehr Sicherheit gibt das seine Eingabe korrekt war.</p><p>Ich dachte mir sowas könnte auch für <strong>normale Formulare</strong> ganz schön sein und deshalb haben wir  ein kleines <strong>jQuery-Plugin</strong> geschrieben welches dieses Verhalten imitiert.</p><h3>How to use</h3><p><strong>jQuery myPass</strong> nutzt die <a
title="jQuery" href="http://jquery.com/" target="_blank">jQuery Javascript library</a>.</p><p>Ihr müsst nur die beiden Dateien in eueren Header einbinden.</p><div
class="wp_codebox_msgheader"><span
class="right"><sup><a
href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span
style="color: #99cc00">?</span></a></sup></span><span
class="left"><a
href="javascript:;" onclick="javascript:showCodeTxt('p765code25'); return false;">View Code</a> JAVASCRIPT</span><div
class="codebox_clear"></div></div><div
class="wp_codebox"><table><tr
id="p76525"><td
class="line_numbers"><pre>1
2
</pre></td><td
class="code" id="p765code25"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>script src<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;_js/jquery.js&quot;</span> type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;text/javascript&quot;</span><span style="color: #339933;">&gt;&lt;/</span>script<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>script src<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;_js/jquery.myPass-1.0.js&quot;</span> type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;text/javascript&quot;</span><span style="color: #339933;">&gt;&lt;/</span>script<span style="color: #339933;">&gt;</span></pre></td></tr></table></div><h3>Options</h3><p>Um das Plugin zu aktivieren und einzustellen müsst Ihr nun nur noch folgendes in euren Header schreiben</p><div
class="wp_codebox_msgheader"><span
class="right"><sup><a
href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span
style="color: #99cc00">?</span></a></sup></span><span
class="left"><a
href="javascript:;" onclick="javascript:showCodeTxt('p765code26'); return false;">View Code</a> JAVASCRIPT</span><div
class="codebox_clear"></div></div><div
class="wp_codebox"><table><tr
id="p76526"><td
class="line_numbers"><pre>1
2
3
4
5
</pre></td><td
class="code" id="p765code26"><pre class="javascript" style="font-family:monospace;">	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.myTextField'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">myPass</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
			charReplace <span style="color: #339933;">:</span> <span style="color: #3366CC;">'%u2665'</span><span style="color: #339933;">,</span>
			charDuration <span style="color: #339933;">:</span> <span style="color: #CC0000;">1000</span>
&nbsp;
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div><ul><li><strong>charReplace:</strong> Hiermit könnt Ihr einstellen durch welches Zeichen die Buchstaben ersetzt werden sollen.Als default ist der Standard-Punkt eingestellt. Weitere Zeichen findet Ihr <a
title="HTML Entity Browser Test Page" href="http://www.fileformat.info/format/w3c/entitytest.htm?sort=Unicode+Character" target="_blank">hier</a>.Nehmt einfach die letzten 4 Zahlen des Unicode und setzt %u davor. z.B. charReplace : &#8216;%u2665&#8242; um statt dem • ein ♥ zu verwenden.</li><li><strong>charDuration: </strong>Hiermit könnt Ihr einstellen wie lange das letzte Zeichen angezeigt werden soll.</li></ul><h3>HTML</h3><p>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.</p><p>In diesem fall .myTextField.</p><div
class="wp_codebox_msgheader"><span
class="right"><sup><a
href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span
style="color: #99cc00">?</span></a></sup></span><span
class="left"><a
href="javascript:;" onclick="javascript:showCodeTxt('p765code27'); return false;">View Code</a> JAVASCRIPT</span><div
class="codebox_clear"></div></div><div
class="wp_codebox"><table><tr
id="p76527"><td
class="line_numbers"><pre>1
2
3
4
</pre></td><td
class="code" id="p765code27"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>form action<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;test.php&quot;</span> method<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;post&quot;</span><span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>input <span style="color: #003366; font-weight: bold;">class</span><span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;myTextField&quot;</span> <span style="color: #000066;">name</span><span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;password&quot;</span> type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;text&quot;</span> <span style="color: #339933;">/&gt;</span>
<span style="color: #339933;">&lt;</span>input <span style="color: #000066;">name</span><span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;Send&quot;</span> type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;submit&quot;</span> value<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;submit&quot;</span> <span style="color: #339933;">/&gt;</span>
<span style="color: #339933;">&lt;/</span>form<span style="color: #339933;">&gt;</span></pre></td></tr></table></div><p>Nach dem senden des Formulars könnt Ihr eure Daten ganz einfach z.B. über PHP verarbeiten.</p><div
class="wp_codebox_msgheader"><span
class="right"><sup><a
href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span
style="color: #99cc00">?</span></a></sup></span><span
class="left"><a
href="javascript:;" onclick="javascript:showCodeTxt('p765code28'); return false;">View Code</a> PHP</span><div
class="codebox_clear"></div></div><div
class="wp_codebox"><table><tr
id="p76528"><td
class="line_numbers"><pre>1
</pre></td><td
class="code" id="p765code28"><pre class="php" style="font-family:monospace;"><span style="color: #b1b100;">echo</span> <span style="color: #000088;">$_POST</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'password'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span></pre></td></tr></table></div><h3>Download &amp; Demo</h3><p><a
title="myPass Plugin Demo" href="http://www.mysrc.de/plugins/myPass/demo/" target="_blank">Demonstration &#8211; Plugin in Action</a></p><p><a
title="myPass Plugin - Download" href="http://www.mysrc.de/plugins/myPass/myPass.zip" target="_blank">Download &#8211; Alle Dateien zum Download</a></p><h3  class="related_post_title">Ähnliche Artikel</h3><ul
class="related_post"><li>4. September 2009 -- <a
href="http://www.mysrc.de/jquery/praxistip-output-element-des-jquery-validate-plugin-andern/" title="Praxistip: Output Element des jQuery Validate Plugin ändern">Praxistip: Output Element des jQuery Validate Plugin ändern</a></li><li>12. August 2009 -- <a
href="http://www.mysrc.de/jquery/jquery-form-plugin-do-some-ajax-magic-easily/" title="jQuery Form Plugin &#8211; Do some AJAX magic easily">jQuery Form Plugin &#8211; Do some AJAX magic easily</a></li><li>4. August 2009 -- <a
href="http://www.mysrc.de/jquery/formularfelder-vorausfullen-und-leeren-mit-jquery-clearfield/" title="Formularfelder vorausfüllen und leeren mit jQuery Clearfield">Formularfelder vorausfüllen und leeren mit jQuery Clearfield</a></li></ul>]]></content:encoded> <wfw:commentRss>http://www.mysrc.de/allgemein/jquery-mypass-password-hiding-iphone-style/feed/</wfw:commentRss> <slash:comments>5</slash:comments> </item> <item><title>jQuery Formulare validieren &#8211; Ein Überblick</title><link>http://www.mysrc.de/jquery/jquery-formulare-validieren-ein-uberblick/</link> <comments>http://www.mysrc.de/jquery/jquery-formulare-validieren-ein-uberblick/#comments</comments> <pubDate>Sat, 16 May 2009 02:51:04 +0000</pubDate> <dc:creator>Oliver Storm</dc:creator> <category><![CDATA[AJAX]]></category> <category><![CDATA[jQuery]]></category> <category><![CDATA[Forms]]></category> <category><![CDATA[Formulare]]></category> <category><![CDATA[MooTools]]></category> <guid
isPermaLink="false">http://www.mysrc.de/?p=573</guid> <description><![CDATA[Wie im vorigen Post angekündigt starten wir heute mit unserer Post-Reihe &#8220;Formulare mit jQuery &#8211; Die umfassende Serie&#8220;. Heute wollen wir mit Teil 1 &#8211; &#8220;Übersicht über aktuelle Form-Validaton Scripts&#8221; 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, [...]]]></description> <content:encoded><![CDATA[<p>Wie im <a
title="Formulare mit jQuery - die umfassende Serie" href="http://www.mysrc.de/jquery/formulare-mit-jquery-die-umfassende-serie/" target="_self">vorigen Post</a> angekündigt starten wir heute mit unserer Post-Reihe &#8220;<strong>Formulare mit jQuery &#8211; Die umfassende Serie</strong>&#8220;.</p><p>Heute wollen wir mit <strong>Teil 1 &#8211; &#8220;Übersicht über aktuelle Form-Validaton Scripts&#8221;</strong> beginnen.<br
/> 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 <strong>Funktionalität</strong>, <strong>Größe </strong>oder <strong>Einfachheit der Implementierung</strong> sind.</p><hr
style="margin: 10px 0pt; color: #cccccc; height: 1px;" /><a
title="bassistance - jQuery plugin: Validation" href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" target="_blank"><br
/> bassistance &#8211; jQuery plugin: Validation</a></p><p>Beim validation Plugin von bassistance kann man wohl vom offiziellen validation Plugin von jQuery sprechen. Dieses Plugin lässt nahezu keine Wünsche offen.<br
/> Das Plugin ist, für die vielzahl an Möglichkeiten die es bietet, mit nur <strong>24KB</strong> in der minified-Version nicht sonderlich groß. Es ist ab <strong>jQuery 1.2.6+</strong> verfügbar und kompatibel mit Version <strong>1.3.2.</strong></p><p>Es bietet alle nur erdenklichen Arten der Formular Überprüfung.</p><ul><li><strong>Validierung on the fly</strong> (beim Wechsel in das nächste Feld), validieren auf submit, validieren von Textfeldern, Textareas, radiobuttons und checkboxen.</li><li>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.</li><li>Auch das prüfen von Selects und multiple-Selects ist ohne weiteres möglich.</li><li>Eingaben können auf Länge, Typ (E-Mail, Number, String&#8230;), Anzahl der gewählten Elemente usw. validiert werden.</li><li>Die Ausgabe der <strong>Error-Messages</strong> 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.</li><li>Mit dem Plugin können richtig ausgefüllte Formulare, auf submit, auch direkt per <strong>AJAX</strong> verarbeitet werden.</li></ul><p>Das einbinden des Scripts ist auch denkbar einfach.</p><div
class="wp_codebox_msgheader"><span
class="right"><sup><a
href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span
style="color: #99cc00">?</span></a></sup></span><span
class="left"><a
href="javascript:;" onclick="javascript:showCodeTxt('p573code35'); return false;">View Code</a> JAVASCRIPT</span><div
class="codebox_clear"></div></div><div
class="wp_codebox"><table><tr
id="p57335"><td
class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
</pre></td><td
class="code" id="p573code35"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#FormularID&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">validate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
		rules<span style="color: #339933;">:</span> <span style="color: #009900;">&#123;</span>
			firstname<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;required&quot;</span><span style="color: #339933;">,</span>
			lastname<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;required&quot;</span><span style="color: #339933;">,</span>
			username<span style="color: #339933;">:</span> <span style="color: #009900;">&#123;</span>
				required<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">,</span>
				minlength<span style="color: #339933;">:</span> <span style="color: #CC0000;">2</span>
			<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
			password<span style="color: #339933;">:</span> <span style="color: #009900;">&#123;</span>
				required<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">,</span>
				minlength<span style="color: #339933;">:</span> <span style="color: #CC0000;">5</span>
			<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
			confirm_password<span style="color: #339933;">:</span> <span style="color: #009900;">&#123;</span>
				required<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">,</span>
				minlength<span style="color: #339933;">:</span> <span style="color: #CC0000;">5</span><span style="color: #339933;">,</span>
				equalTo<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;#password&quot;</span>
			<span style="color: #009900;">&#125;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div><p>Nun müsst ihr nur noch euren Formular-Elementen die entsprechende ID geben.</p><p>Eine Vielzahl von Demos und die Dateien zum Download findet ihr auf der offiziellen <a
title="bassistance - jQuery plugin: Validation" href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" target="_self">Website</a>.<br
/> <span
id="more-573"></span></p><hr
style="margin: 10px 0pt; color: #cccccc; height: 1px;" /><a
title="jVal - jQuery Form Field Validation Plugin " href="http://www.overset.com/2008/07/31/jval-jquery-form-field-validation-plugin" target="_blank"><br
/> jVal &#8211; jQuery Form Field Validation Plugin </a></p><p>Bei <strong>jVal</strong> handelt sich um eines der etwas schöneren Validation-Plugins.<br
/> Das Plugin funktioniert mit der aktuellen jQuery-Version 1.3.1 und hat nur 5.3KB.<br
/> Die <strong>Grundfunktionen</strong> des Plugins kurz im Überblick:</p><ul><li>Validieren von Inhalten innerhalb eines bestimmten Containers, basierend auf den Attributen des Input-Tags.</li><li><strong>Einfache Konfiguration</strong> der Validierungsmöglichkeiten.</li><li>Validierung aller Formular-Felder innerhalb eines Containers mit einem einzigen Funktionsaufrufs.</li><li>Validierung einzelner Formular-Felder wenn der User das Feld verlässt.</li><li>Verhindern der Eingabe von <strong>speziellen Zeichen</strong> in ein Feld mit Meldung an den User das dies nicht erlaubt ist.</li></ul><p>Das besondere an diesem Plugin ist wohl die animierte Ausgabe der Fehlermeldungen. Diese sliden mit einem Blur vom Feldende aus ein.</p><p><img
class="alignnone size-full wp-image-552" title="jVal" src="http://www.mysrc.de/wp-content/uploads/2009/05/jval1.jpg" alt="jVal" width="460" height="99" /></p><p>Für das Plugin werden neben der jVal.js und der jquery.js noch ein jVal.css sowie <a
title="jquery.corner.js" href="http://www.malsup.com/jquery/corner/jquery.corner.js" target="_blank">jquery.corner.js</a> von <a
title="Dave Methvin - jQuery Corner" href="http://methvin.com/jquery/jq-corner.html" target="_blank">Dave Methvin</a> benötigt. Mittels des sehr übersichtlichen css-Files lässt sich das Aussehen der Error-Messages ohne Probleme anpassen.</p><p>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.<br
/> Die übergabe der Parameter findet, im Gegensatz zu den meisten anderen Plugins, nicht zentral statt sondern muss jedem Formular-Element mitgegeben werden.</p><div
class="wp_codebox_msgheader"><span
class="right"><sup><a
href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span
style="color: #99cc00">?</span></a></sup></span><span
class="left"><a
href="javascript:;" onclick="javascript:showCodeTxt('p573code36'); return false;">View Code</a> HTML</span><div
class="codebox_clear"></div></div><div
class="wp_codebox"><table><tr
id="p57336"><td
class="line_numbers"><pre>1
</pre></td><td
class="code" id="p573code36"><pre class="html" style="font-family:monospace;">&lt;input id=&quot;f1&quot; size=&quot;20&quot; type=&quot;text&quot; /&gt;</pre></td></tr></table></div><hr
style="margin: 10px 0pt; color: #cccccc; height: 1px;" /><a
title="jQuery AlphaNumeric" href="http://itgroup.com.ph/alphanumeric/" target="_blank"><br
/> jQuery AlphaNumeric</a></p><p>AlphaNumeric von Paulo Marinas ist ein validation-Plugin welches sich speziell der <strong>Begrenzung der Eingabe</strong> widmet. AlphaNumeric baut auf dem <a
title="jQuery - numeric" href="http://www.texotela.co.uk/code/jquery/numeric/" target="_blank">Numeric Plugin</a> von Sam Collet auf, welches nur die Eingabe von Zahlen und Punkten erlaubt.<br
/> Mit AlphaNumeric habt ihr die Möglichkeit die Eingaben in Formularfelder so zu Filtern das nur <strong>bestimmte Typen</strong> eingegeben werden können.<br
/> Die <strong>Grundfunktionen </strong>des Plugins kurz im Überblick:</p><ul><li>Begrenzung der Eingabe ausschließlich auf Buchstaben</li><li>Begrenzung der Eingabe ausschließelich auf Zahlen</li><li>Begrenzung der Eingabe auf Zahlen und Buchstaben (keine Satz oder Sonderzeichen)</li><li>Erstellen eigener Regeln für die Eingabe</li></ul><p>Ein sehr nützliches Plugin wenn man die volle Kontrolle über seine Felder haben will.<br
/> Ein einfaches Beispiel für die Implementierung:</p><div
class="wp_codebox_msgheader"><span
class="right"><sup><a
href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span
style="color: #99cc00">?</span></a></sup></span><span
class="left"><a
href="javascript:;" onclick="javascript:showCodeTxt('p573code37'); return false;">View Code</a> JAVASCRIPT</span><div
class="codebox_clear"></div></div><div
class="wp_codebox"><table><tr
id="p57337"><td
class="line_numbers"><pre>1
2
</pre></td><td
class="code" id="p573code37"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.klasse1'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">alphanumeric</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.klasse2'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">alphanumeric</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>allow<span style="color: #339933;">:</span><span style="color: #3366CC;">&quot;., &quot;</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div><p>dann müsst Ihr nur noch euren Textfelder die entsprechende Klasse zuweisen und das war es schon.</p><div
class="wp_codebox_msgheader"><span
class="right"><sup><a
href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span
style="color: #99cc00">?</span></a></sup></span><span
class="left"><a
href="javascript:;" onclick="javascript:showCodeTxt('p573code38'); return false;">View Code</a> HTML</span><div
class="codebox_clear"></div></div><div
class="wp_codebox"><table><tr
id="p57338"><td
class="line_numbers"><pre>1
2
</pre></td><td
class="code" id="p573code38"><pre class="html" style="font-family:monospace;">&lt;input class=&quot;klasse1 tb&quot; size=&quot;10&quot; type=&quot;text&quot; /&gt;
&lt;input class=&quot;klasse2 tb&quot; size=&quot;10&quot; type=&quot;text&quot; /&gt;</pre></td></tr></table></div><p>Alle Dateien zum Download sowie Demos findet ihr auf der offiziellen <a
title="jQuery AlphaNumeric" href="http://itgroup.com.ph/alphanumeric/" target="_blank">Website</a>.</p><hr
style="margin: 10px 0pt; color: #cccccc; height: 1px;" /><a
title="Form Validator" href="http://www.jeremy-fry.com/2008/10/20/form-validator" target="_blank"><br
/> Form Validator</a></p><p>Der Form Validator von Jeremy Fry überzeugt aufgrund seiner Schlicht- und Schönheit. Zudem ist er extrem einfach zu implementieren. Das Plugin hat nur <strong>5KB</strong> und läuft mit jQuery <strong>1.3.2</strong></p><p>Formularfelder werden <strong>on the fly validiert</strong> und werden, je nach Eingabe, &#8220;grün&#8221; oder &#8220;rot&#8221; umrahmt.<br
/> Zusätzlich kann man direkt angeben welche php-Datei zur Verarbeitung aufgrufen werden soll.<br
/> 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.<br
/> Speziell validiert werden können E-Mailadressen, Telefonnummern, Postleitzahlen, Namen und Datumseingaben.<br
/> Das zugehörige CSS ist sehr übersichtlich und kann problemlos angepasst werden.</p><p><img
class="alignnone size-full wp-image-564" title="formvalidator" src="http://www.mysrc.de/wp-content/uploads/2009/05/formvalidator.jpg" alt="formvalidator" width="460" height="126" /></p><p>Ein einfaches Beispiel für die Implementierung:</p><div
class="wp_codebox_msgheader"><span
class="right"><sup><a
href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span
style="color: #99cc00">?</span></a></sup></span><span
class="left"><a
href="javascript:;" onclick="javascript:showCodeTxt('p573code39'); return false;">View Code</a> JAVASCRIPT</span><div
class="codebox_clear"></div></div><div
class="wp_codebox"><table><tr
id="p57339"><td
class="line_numbers"><pre>1
2
3
4
5
6
7
8
</pre></td><td
class="code" id="p573code39"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#123;</span>
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#myform'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">FormValidate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
		phpFile<span style="color: #339933;">:</span><span style="color: #3366CC;">&quot;send.php&quot;</span><span style="color: #339933;">,</span>
		ajax<span style="color: #339933;">:</span><span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">,</span>
		validCheck<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">false</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div><p>Anschließend nur noch euren Textfeldern die entsprechnden Klassen zuweisen.</p><div
class="wp_codebox_msgheader"><span
class="right"><sup><a
href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span
style="color: #99cc00">?</span></a></sup></span><span
class="left"><a
href="javascript:;" onclick="javascript:showCodeTxt('p573code40'); return false;">View Code</a> HTML</span><div
class="codebox_clear"></div></div><div
class="wp_codebox"><table><tr
id="p57340"><td
class="line_numbers"><pre>1
2
</pre></td><td
class="code" id="p573code40"><pre class="html" style="font-family:monospace;">&lt;input id=&quot;form_name&quot; class=&quot;is_required&quot; name=&quot;Name&quot; type=&quot;text&quot; /&gt;
&lt;input id=&quot;form_email&quot; class=&quot;vemail&quot; name=&quot;Email&quot; type=&quot;text&quot; /&gt;</pre></td></tr></table></div><p>Eine Demo sowie alle Dateien zum Download findet Ihr auf der offiziellen <a
title="Form Validator" href="http://www.jeremy-fry.com/2008/10/20/form-validator" target="_blank">Website</a>.</p><hr
style="margin: 10px 0pt; color: #cccccc; height: 1px;" />Sicher könnte man diese Liste um etliche andere  Plugins erweitern. Allerdings solltet Ihr mit  den oben vorgestellten Plugins so ziemlich <strong>alle Anforderungen</strong> die man an eine <strong>Formular-Validierung </strong>haben kann abdecken können. Es gibt noch ein paar weitere Plugins die ab und an nützlich sein können, die euch hier aber nur kurz in einer Linkliste an die Hand geben möchte.</p><ul><li><a
title="Simple jQuery form validation" href="http://www.willjessup.com/sandbox/jquery/form_validator/form_validate.html" target="_blank">Einfache jQuery form validaton mit JSON return</a></li><li><a
title="Validation Plugin" href="http://www.consulenza-web.com/jquery_plugins/validation.html" target="_blank">jQuery Formular zum Filtern versch. Eingaben</a></li><li><a
title="Stunning ajax form validation" href="http://www.drsoft.com/b/Stunning_ajax_form_validation-54" target="_blank">Formular-Validierung mit jQuery und AJAX</a></li><li><a
title="A simple AJAX (JQuery) Contact Form with PHP Validation" href="http://www.bitrepository.com/a-simple-ajax-contact-form-with-php-validation.html" target="_blank">Einfaches jQuery (AJAX) Formular mit PHP-Validierung</a></li><li><a
title="How to Mask Input with jQuery?" href="http://webdeveloperplus.com/jquery/how-to-mask-input-with-jquery/" target="_blank">Formular Eingaben mit jQuery maskieren</a></li><li><a
title="Customizing jQuery Validation" href="http://blogs.teamb.com/craigstuntz/2009/01/15/37923/" target="_blank">jQuery Validierung customizen</a></li></ul><p>Der Vollständigkeit wegen sollt hier auch noch das <a
title="jQuery Form Plugin" href="http://malsup.com/jquery/form/#code-samples" target="_blank">Form Plugin von Malsup</a> erwähnt werden, welches sicher eines der, wenn nicht dass, <strong>umfangreichsten Formular Plugins für jQuery</strong> ist. Welches unteranderem auch validierungs Möglichkeiten bietet. Dieses Plugin werden wir euch in Teil 4 &#8220;Übersicht über aktuelle jQuery-Plugins zum verarbeiten von Formulardaten per AJAX&#8221; näher vorstellen werden.</p><p>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.</p><hr
style="margin: 10px 0pt; color: #cccccc; height: 1px;" /><strong><br
/> Randnotiz</strong></p><p>Auch wenn es in diesem Post eigentlich um Formulare mit jQuery geht möchte ich euch noch kurz ein validation-Script für<strong> MooTools</strong> vorstellen.<br
/> <a
title="MooTools.Floor FormCheck" href="http://mootools.floor.ch/en/labs/formcheck/forum-registration/index.htm" target="_blank">MooTools.Floor FormCheck</a>. 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.</p><p><img
class="alignnone size-full wp-image-535" title="MooTools.Floor FormCheck" src="http://www.mysrc.de/wp-content/uploads/2009/05/mootoolsfloor.jpg" alt="MooTools.Floor FormCheck" width="460" height="89" /></p><p>Das Plugin beherrscht alle gänigen validierungs-Formen hat aber ein paar schöne Besonderheiten.<br
/> So erscheinen die Fehlermeldungen schön in Form von Tooltips am Formularelement.<br
/> Ausserdem slided das Plugin, auf Submit, die Seite an die Stelle an welcher der Fehler angezeigt wird.<br
/> Das ganze könnt ihr euch in dieser <a
title="MooTools.Floor FormCheck - Demo" href="http://mootools.floor.ch/en/labs/formcheck/forum-registration/index.htm" target="_self">Demo </a>anschauen.</p><hr
style="margin: 10px 0pt; color: #cccccc; height: 1px;" />Ich hoffe euch mit diesem Post einen ersten Überblick über Formular Validierung verschafft zu haben.</p><p>Verpasst nicht die Folgeteile dieser Serie und aboniert unser <a
title="mySrc.de - RSS Feed" href="http://www.mysrc.de/feed/" target="_self">RSS-Feed</a>.</p><hr
style="margin: 10px 0pt; color: #cccccc; height: 1px;" />Formulare mit jQuery &#8211; die umfassende Serie:</p><ul><li>Teil 1: <a
title="jQuery Formulare validieren - Ein Überblick" href="http://www.mysrc.de/jquery/jquery-formulare-validieren-ein-uberblick/" target="_self">Übersicht über aktuelle Form-Validaton Scripts.</a></li></ul><hr
style="margin: 10px 0pt; color: #cccccc; height: 1px;" /><h3  class="related_post_title">Ähnliche Artikel</h3><ul
class="related_post"><li>12. August 2009 -- <a
href="http://www.mysrc.de/jquery/jquery-form-plugin-do-some-ajax-magic-easily/" title="jQuery Form Plugin &#8211; Do some AJAX magic easily">jQuery Form Plugin &#8211; Do some AJAX magic easily</a></li><li>16. Mai 2009 -- <a
href="http://www.mysrc.de/jquery/formulare-mit-jquery-die-umfassende-serie/" title="Formulare mit jQuery &#8211; die umfassende Serie">Formulare mit jQuery &#8211; die umfassende Serie</a></li><li>19. November 2010 -- <a
href="http://www.mysrc.de/jquery/praxistipp-suchfeld-leeren-on-focus-jquery/" title="Praxistipp: Suchfeld leeren on focus (jQuery)">Praxistipp: Suchfeld leeren on focus (jQuery)</a></li></ul>]]></content:encoded> <wfw:commentRss>http://www.mysrc.de/jquery/jquery-formulare-validieren-ein-uberblick/feed/</wfw:commentRss> <slash:comments>6</slash:comments> </item> <item><title>Formulare mit jQuery &#8211; die umfassende Serie</title><link>http://www.mysrc.de/jquery/formulare-mit-jquery-die-umfassende-serie/</link> <comments>http://www.mysrc.de/jquery/formulare-mit-jquery-die-umfassende-serie/#comments</comments> <pubDate>Sat, 16 May 2009 02:48:38 +0000</pubDate> <dc:creator>Oliver Storm</dc:creator> <category><![CDATA[AJAX]]></category> <category><![CDATA[Web-Development]]></category> <category><![CDATA[jQuery]]></category> <category><![CDATA[Forms]]></category> <category><![CDATA[Formulare]]></category> <category><![CDATA[upload]]></category> <guid
isPermaLink="false">http://www.mysrc.de/?p=512</guid> <description><![CDATA[Wie wichtig das Thema Fomulare und jQuery ist, fällt uns beim regelmäßigen überfliegen unserer Blog Statistiken immer wieder auf. Viele der Suchanfragen über Google beinhalten Keywords die mit jQuery und Formularen zu tun haben. Auch die Seiten welche mitunter die meisten Zugriffe haben gehen in diese Richtung. Wir wollen dem ganzen Rechnung tragen und starten [...]]]></description> <content:encoded><![CDATA[<p>Wie wichtig das Thema Fomulare und jQuery ist, fällt uns beim regelmäßigen überfliegen unserer Blog Statistiken immer wieder auf. Viele der Suchanfragen über Google<strong> </strong>beinhalten<strong> Keywords</strong> die mit <strong>jQuery und Formularen</strong> zu tun haben.<br
/> Auch die Seiten welche mitunter die meisten Zugriffe haben gehen in diese Richtung.<br
/> Wir wollen dem ganzen Rechnung tragen und starten heute eine langfristige und ausführliche Serie zum gesamten Thema <strong>&#8220;Formulare und jQuery&#8221;</strong>.<br
/> Die Serie wird aus mehreren Teilen bestehen und sich wie folgt aufgliedern:</p><ul><li><a
title="jQuery Formulare validieren - Ein Überblick" href="http://www.mysrc.de/jquery/jquery-formulare-validieren-ein-uberblick/" target="_self">Übersicht über aktuelle Form-Validaton Scripts.</a></li><li>Überblick über die wichtigsten Funktionen die jQuery für die Validierung bietet.</li><li>Tutorial &#8220;Eigenes Validation-Script mit jQuery erstellen&#8221;.</li><li>Übersicht über aktuelle jQuery-Plugins zum verarbeiten von Formulardaten per AJAX.</li><li>Tutorial &#8220;Eigenes jQuery-Plugin zum verarbeiten von Formulardaten per AJAX inkl. Dateiupload&#8221;.</li><li>Überblick über die wichtigsten Funktionen die jQuery zum modifizieren von Formularen bietet.</li><li>Übersicht zum Thema &#8220;customized Forms&#8221;. Schönere Formulare mit jQuery.</li><li>Übersicht zum Thema &#8220;weiterführende Formulartechniken&#8221;.  Autocomplete, In Place Editing, Date Picker, ToolTips, doppeltes versenden verhindern und ein paar weitere Kleinigkeiten.</li></ul><p>Zum Abschluss der Serie werden wir euch noch unser <strong>neues Formular-Plugin</strong> vorstellen an dem wir momentan mit Hochdruck arbeiten. Soviel vorab.</p><p>Heute wollen wir gleich mit <strong>Teil 1 &#8211; &#8220;<a
title="jQuery Formulare validieren - Ein Überblick" href="http://www.mysrc.de/jquery/jquery-formulare-validieren-ein-uberblick/" target="_self">Übersicht über aktuelle Form-Validaton Scripts</a>&#8220;</strong> beginnen.</p><h3  class="related_post_title">Ähnliche Artikel</h3><ul
class="related_post"><li>12. August 2009 -- <a
href="http://www.mysrc.de/jquery/jquery-form-plugin-do-some-ajax-magic-easily/" title="jQuery Form Plugin &#8211; Do some AJAX magic easily">jQuery Form Plugin &#8211; Do some AJAX magic easily</a></li><li>16. Mai 2009 -- <a
href="http://www.mysrc.de/jquery/jquery-formulare-validieren-ein-uberblick/" title="jQuery Formulare validieren &#8211; Ein Überblick">jQuery Formulare validieren &#8211; Ein Überblick</a></li><li>14. Mai 2009 -- <a
href="http://www.mysrc.de/jquery/ajax-datei-upload-mit-jquery/" title="Ajax Datei-Upload mit jQuery">Ajax Datei-Upload mit jQuery</a></li></ul>]]></content:encoded> <wfw:commentRss>http://www.mysrc.de/jquery/formulare-mit-jquery-die-umfassende-serie/feed/</wfw:commentRss> <slash:comments>4</slash:comments> </item> <item><title>Ajax Datei-Upload mit jQuery</title><link>http://www.mysrc.de/jquery/ajax-datei-upload-mit-jquery/</link> <comments>http://www.mysrc.de/jquery/ajax-datei-upload-mit-jquery/#comments</comments> <pubDate>Thu, 14 May 2009 21:50:32 +0000</pubDate> <dc:creator>Stefan Huissel</dc:creator> <category><![CDATA[AJAX]]></category> <category><![CDATA[jQuery]]></category> <category><![CDATA[Forms]]></category> <category><![CDATA[Plugin]]></category> <category><![CDATA[upload]]></category> <guid
isPermaLink="false">http://www.mysrc.de/?p=487</guid> <description><![CDATA[Eine geschickte und schnelle Methode um den Upload von Dateien in Formularen zu erledigen ist wie so oft Ajax. Ein nettes Plugin dafür gibt es auf http://valums.com/ajax-upload/, welches zudem auch Multiple Uploads unterstützt. Das Plugin glänzt nicht nur durch seine einfache Handhabung, auch lässt sich damit das lästige Problem der Gestaltung von Uploadformularfeldern, also &#8220;input [...]]]></description> <content:encoded><![CDATA[<p>Eine geschickte und schnelle Methode um den Upload von Dateien in Formularen zu erledigen ist wie so oft <strong>Ajax</strong>. Ein nettes Plugin dafür gibt es auf <a
href="http://valums.com/ajax-upload/" target="_blank">http://valums.com/ajax-upload/</a>, welches zudem auch <strong>Multiple Uploads</strong> unterstützt.<br
/> Das <strong>Plugin </strong>glänzt nicht nur durch seine einfache Handhabung, auch lässt sich damit das lästige Problem der <strong>Gestaltung</strong> von <strong>Uploadformularfeldern</strong>, also &#8220;input type=&#8221;file&#8221;..&#8221; in den Griff bekommen. Auf diese Felder greift das CSS oft nicht wie es sollte usw.</p><p>Auf was ihr allerdings achten solltet ist, dass die Dateien, die mit dem Plugin schon hochgeladen wurden, bevor <strong>der Submit abgesetzt</strong>, bzw. <strong>vor dem Abschicken des Formulars</strong> 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 <strong>mit Ajax</strong> und das <strong>Formular</strong> als Method Attribut <strong>GET/POST</strong> 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.</p><p>Screeshot der Demo:<br
/> <img
src="http://www.mysrc.de/wp-content/uploads/2009/05/ajax_upload.png" alt="ajax_upload" title="ajax_upload" width="450" height="145" class="alignnone size-full wp-image-494" /></p><p>Kurz zu den Bestandteilen des Codes:</p><p>- Der HTML Teil</p><div
class="wp_codebox_msgheader"><span
class="right"><sup><a
href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span
style="color: #99cc00">?</span></a></sup></span><span
class="left"><a
href="javascript:;" onclick="javascript:showCodeTxt('p487code44'); return false;">View Code</a> HTML</span><div
class="codebox_clear"></div></div><div
class="wp_codebox"><table><tr
id="p48744"><td
class="line_numbers"><pre>1
2
3
</pre></td><td
class="code" id="p487code44"><pre class="html" style="font-family:monospace;">&nbsp;
&lt;!-- Anlegen eines einfachen Divs auf das später die Upload Funktion gelegt wird --&gt;
&lt;div id=&quot;upload_button&quot;&gt;Upload&lt;/div&gt;</pre></td></tr></table></div><p>- Der Javascript Teil (weitere js-Dateien werden nicht benötigt)</p><div
class="wp_codebox_msgheader"><span
class="right"><sup><a
href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span
style="color: #99cc00">?</span></a></sup></span><span
class="left"><a
href="javascript:;" onclick="javascript:showCodeTxt('p487code45'); return false;">View Code</a> JAVASCRIPT</span><div
class="codebox_clear"></div></div><div
class="wp_codebox"><table><tr
id="p48745"><td
class="line_numbers"><pre>1
2
3
4
5
6
7
</pre></td><td
class="code" id="p487code45"><pre class="javascript" style="font-family:monospace;">&nbsp;
<span style="color: #339933;">&lt;</span>script src<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;ajaxupload.3.1.js&quot;</span> type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;text/javascript&quot;</span><span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>script type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;text/javascript&quot;</span><span style="color: #339933;">&gt;</span>
    $<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">&#40;</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
         <span style="color: #003366; font-weight: bold;">new</span> AjaxUpload<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'upload_button'</span><span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span>action<span style="color: #339933;">:</span> <span style="color: #3366CC;">'upload.php'</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #339933;">&lt;/</span>script<span style="color: #339933;">&gt;</span></pre></td></tr></table></div><p>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.</p><p>- Nach abesenden der Daten an &#8220;upload.php&#8221; geht es an die serverseite Verarbeitung</p><div
class="wp_codebox_msgheader"><span
class="right"><sup><a
href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span
style="color: #99cc00">?</span></a></sup></span><span
class="left"><a
href="javascript:;" onclick="javascript:showCodeTxt('p487code46'); return false;">View Code</a> PHP</span><div
class="codebox_clear"></div></div><div
class="wp_codebox"><table><tr
id="p48746"><td
class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
</pre></td><td
class="code" id="p487code46"><pre class="php" style="font-family:monospace;">&nbsp;
<span style="color: #000088;">$uploaddir</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'/var/www/uploads/'</span><span style="color: #339933;">;</span>
<span style="color: #000088;">$uploadfile</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$uploaddir</span> <span style="color: #339933;">.</span> <a href="http://www.php.net/basename"><span style="color: #990000;">basename</span></a><span style="color: #009900;">&#40;</span><span style="color: #000088;">$_FILES</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'userfile'</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'name'</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">//move_uploaded_file ist die Standard PHP-Funktion um Dateien auf dem Server zu verarbeiten</span>
<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><a href="http://www.php.net/move_uploaded_file"><span style="color: #990000;">move_uploaded_file</span></a><span style="color: #009900;">&#40;</span><span style="color: #000088;">$_FILES</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'userfile'</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'tmp_name'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span> <span style="color: #000088;">$uploadfile</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  <span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">&quot;success&quot;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span> <span style="color: #b1b100;">else</span> <span style="color: #009900;">&#123;</span>
  <span style="color: #666666; font-style: italic;">// Als echo keinesfalls false benutzen. Führt zu Konflikten mit dem Ajax-Request</span>
  <span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">&quot;error&quot;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div><p>Auf der Valums Website gibt es ebenfalls Beispiele für Ruby sowie Coldfusion.</p><p>Die Demo findet ihr <a
href="http://valums.com/wp-content/uploads/ajax-upload/demo-jquery.htm">hier</a></p><h3  class="related_post_title">Ähnliche Artikel</h3><ul
class="related_post"><li>12. August 2009 -- <a
href="http://www.mysrc.de/jquery/jquery-form-plugin-do-some-ajax-magic-easily/" title="jQuery Form Plugin &#8211; Do some AJAX magic easily">jQuery Form Plugin &#8211; Do some AJAX magic easily</a></li><li>16. Mai 2009 -- <a
href="http://www.mysrc.de/jquery/formulare-mit-jquery-die-umfassende-serie/" title="Formulare mit jQuery &#8211; die umfassende Serie">Formulare mit jQuery &#8211; die umfassende Serie</a></li><li>4. September 2009 -- <a
href="http://www.mysrc.de/jquery/praxistip-output-element-des-jquery-validate-plugin-andern/" title="Praxistip: Output Element des jQuery Validate Plugin ändern">Praxistip: Output Element des jQuery Validate Plugin ändern</a></li></ul>]]></content:encoded> <wfw:commentRss>http://www.mysrc.de/jquery/ajax-datei-upload-mit-jquery/feed/</wfw:commentRss> <slash:comments>1</slash:comments> </item> <item><title>Formulare ausrichten mit jQuery und CSS</title><link>http://www.mysrc.de/jquery/formulare-ausrichten-mit-jquery-und-css/</link> <comments>http://www.mysrc.de/jquery/formulare-ausrichten-mit-jquery-und-css/#comments</comments> <pubDate>Sat, 09 May 2009 10:04:28 +0000</pubDate> <dc:creator>Stefan Huissel</dc:creator> <category><![CDATA[Web-Development]]></category> <category><![CDATA[jQuery]]></category> <category><![CDATA[Forms]]></category> <category><![CDATA[Formulare]]></category> <guid
isPermaLink="false">http://www.mysrc.de/?p=464</guid> <description><![CDATA[Formulare lassen sich gut mit Tabellen oder Label layouten. Allerdings sind Tabellen zum Anzeigen von Daten gedacht und nicht um Oberflächelemente zu positionieren. Bei der CSS Variante mit Div&#8217;s und Label steht man vor dem Problem, dass sich die Länge des Formularfeld beschreibenden Textes ändern kann und ab einer bestimmten Breite zu einem Zeilenumbruch oder [...]]]></description> <content:encoded><![CDATA[<p><strong>Formulare</strong> lassen sich gut mit Tabellen oder Label <strong>layouten</strong>. Allerdings sind Tabellen zum Anzeigen von Daten gedacht und nicht um Oberflächelemente zu positionieren. Bei der CSS Variante mit Div&#8217;s und Label steht man vor dem Problem, dass sich die <strong>Länge des</strong> Formularfeld beschreibenden <strong>Textes ändern</strong> kann und ab einer bestimmten Breite zu einem Zeilenumbruch oder zu einer unterschiedlichen Ausrichtung der Formularfelder führen.<br
/> Diese kleine Schwierigkeit lässt sich mit jQuery elegant umgehen.</p><p>Zunächste einmal brauchen wir ein einfaches <strong>HTML-Grundgerüst</strong>:</p><div
class="wp_codebox_msgheader"><span
class="right"><sup><a
href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span
style="color: #99cc00">?</span></a></sup></span><span
class="left"><a
href="javascript:;" onclick="javascript:showCodeTxt('p464code50'); return false;">View Code</a> HTML</span><div
class="codebox_clear"></div></div><div
class="wp_codebox"><table><tr
id="p46450"><td
class="line_numbers"><pre>1
2
3
4
5
6
7
8
</pre></td><td
class="code" id="p464code50"><pre class="html" style="font-family:monospace;">&lt;div class=&quot;input_div&quot;&gt;
   &lt;label for=&quot;name&quot;&gt;Name:&lt;/label&gt;
  &lt;input type=&quot;text&quot; id=&quot;einName&quot; name=&quot;derName&quot; /&gt;
&lt;/div&gt;
&lt;div class=&quot;input_div&quot;&gt;
   ...
   ...
&lt;/div&gt;</pre></td></tr></table></div><p><strong>Das CSS</strong> ungefähr in dieser Form:</p><div
class="wp_codebox_msgheader"><span
class="right"><sup><a
href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span
style="color: #99cc00">?</span></a></sup></span><span
class="left"><a
href="javascript:;" onclick="javascript:showCodeTxt('p464code51'); return false;">View Code</a> CSS</span><div
class="codebox_clear"></div></div><div
class="wp_codebox"><table><tr
id="p46451"><td
class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
</pre></td><td
class="code" id="p464code51"><pre class="css" style="font-family:monospace;">label<span style="color: #00AA00;">,</span> input<span style="color: #00AA00;">&#91;</span>type<span style="color: #00AA00;">=</span><span style="color: #ff0000;">&quot;text&quot;</span><span style="color: #00AA00;">&#93;</span><span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">float</span><span style="color: #00AA00;">:</span>      <span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">display</span><span style="color: #00AA00;">:</span>  <span style="color: #993333;">block</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
&nbsp;
label<span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">margin-right</span><span style="color: #00AA00;">:</span> <span style="color: #933;">5px</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
&nbsp;
.input_div<span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">100%</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">overflow</span><span style="color: #00AA00;">:</span><span style="color: #993333;">auto</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div><p>Im Normalfall gibt man dem Label noch eine <strong>fixe &#8220;width&#8221; Eigenschaft</strong> mit. Aber damit die Texte in jedem Fall in das Label passen und <strong>immer den gleichen Abstand</strong> zum <strong>Formularfeld</strong> haben, benutzen wir jQuery um die notwendige Breite bestimmen zu lassen:</p><div
class="wp_codebox_msgheader"><span
class="right"><sup><a
href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span
style="color: #99cc00">?</span></a></sup></span><span
class="left"><a
href="javascript:;" onclick="javascript:showCodeTxt('p464code52'); return false;">View Code</a> JAVASCRIPT</span><div
class="codebox_clear"></div></div><div
class="wp_codebox"><table><tr
id="p46452"><td
class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
</pre></td><td
class="code" id="p464code52"><pre class="javascript" style="font-family:monospace;">  $<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      <span style="color: #003366; font-weight: bold;">var</span> max <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
      <span style="color: #006600; font-style: italic;">//prüfe die Breite jedes Labels und speichere die größte Zahl in der Variable max</span>
      $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;label&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
          <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">width</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&gt;</span> max<span style="color: #009900;">&#41;</span>
              max <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">width</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
       <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
      <span style="color: #006600; font-style: italic;">//setze jedes Label-Tag auf die gleiche Breite</span>
      $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;label&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">width</span><span style="color: #009900;">&#40;</span>max<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div><p>So, das wäre es dann schon gewesen und das Ergebnis sieht wie folgt aus:</p><p><img
src="http://www.mysrc.de/wp-content/uploads/2009/05/form.png" alt="Form" title="Form" width="395" height="74" class="alignnone size-full wp-image-469" /></p><h3  class="related_post_title">Ähnliche Artikel</h3><ul
class="related_post"><li>19. November 2010 -- <a
href="http://www.mysrc.de/jquery/praxistipp-suchfeld-leeren-on-focus-jquery/" title="Praxistipp: Suchfeld leeren on focus (jQuery)">Praxistipp: Suchfeld leeren on focus (jQuery)</a></li><li>17. September 2009 -- <a
href="http://www.mysrc.de/jquery/jcryption-html-form-encryption-plugin/" title="jCryption &#8211; HTML-Form Encryption Plugin">jCryption &#8211; HTML-Form Encryption Plugin</a></li><li>4. September 2009 -- <a
href="http://www.mysrc.de/jquery/praxistip-output-element-des-jquery-validate-plugin-andern/" title="Praxistip: Output Element des jQuery Validate Plugin ändern">Praxistip: Output Element des jQuery Validate Plugin ändern</a></li></ul>]]></content:encoded> <wfw:commentRss>http://www.mysrc.de/jquery/formulare-ausrichten-mit-jquery-und-css/feed/</wfw:commentRss> <slash:comments>2</slash:comments> </item> </channel> </rss>
