Formulare mit jQuery – die umfassende Serie

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 heute eine langfristige und ausführliche Serie zum gesamten Thema “Formulare und jQuery”.
Die Serie wird aus mehreren Teilen bestehen und sich wie folgt aufgliedern:

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

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

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

Formulare ausrichten mit jQuery und CSS

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’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 zu einer unterschiedlichen Ausrichtung der Formularfelder führen.
Diese kleine Schwierigkeit lässt sich mit jQuery elegant umgehen.

Zunächste einmal brauchen wir ein einfaches HTML-Grundgerüst:

1
2
3
4
5
6
7
8

<div class="input_div">
   <label for="name">Name:</label>
  <input type="text" id="einName" name="derName" />
</div>
<div class="input_div">
   ...
   ...
</div>

Das CSS ungefähr in dieser Form:

1
2
3
4
5
6
7
8
9
10
11
12
13

label, input[type="text"]{
    float:      left;
    display:  block;
}
 
label{
    margin-right: 5px;
}
 
.input_div{
    width:100%;
    overflow:auto;
}

Im Normalfall gibt man dem Label noch eine fixe “width” Eigenschaft mit. Aber damit die Texte in jedem Fall in das Label passen und immer den gleichen Abstand zum Formularfeld haben, benutzen wir jQuery um die notwendige Breite bestimmen zu lassen:

1
2
3
4
5
6
7
8
9
10

  $(document).ready(function() {
      var max = 0;
      //prüfe die Breite jedes Labels und speichere die größte Zahl in der Variable max
      $("label").each(function(){
          if ($(this).width() > max)
              max = $(this).width();
       });
      //setze jedes Label-Tag auf die gleiche Breite
      $("label").width(max);
});

So, das wäre es dann schon gewesen und das Ergebnis sieht wie folgt aus: