JQuery Kochbuch (German Edition)

(siehe auch Dateien im Hintergrund hochladen ):
$(".selector"). validate ({
    submitHandler: function(form) {
     $(form).ajaxSubmit();
    }
});
    Der Callback
invalidHandler
ist nützlich, um Code auszuführen, wenn ein ungültiges Submit auftritt. Das folgende Beispiel zeigt eine Zusammenfassung der fehlenden Felder an:
$("#myform").validate({
    invalidHandler: function(e, validator) {
     var errors = validator.numberOfInvalids();
     if (errors) {
     var message = errors == 1
     ? '1 Feld ist nicht ausgefüllt. Es wurde hervorgehoben.'
     : 'Es fehlen ' + errors + ' Felder. Sie wurden hervorgehoben.';
     $("div.error span").html(message);
     $("div.error").show();
     } else {
     $("div.error").hide();
     }
    }
});
    Die Marketo-Demo zeigt dieses Verhalten live ( http://jquery-cookbook.com/go/plugin-validation-marketo-demo ).
    Einschränkungen
    Wann ist es sinnvoll, das Plugin nicht zu verwenden und die Überprüfungen selbst zu programmieren? Es gibt ein paar Einschränkungen des Plugins: Forms, bei denen Gruppen von Eingabefeldern, wie zum Beispiel Checkboxen, unterschiedliche
name
-Attribute haben, lassen sich als Gruppe nur schwer validieren. Listen mit Eingabefeldern, die alle den gleichen Namen haben, können nicht überprüft werden, weil jedes einzelne Eingabefeld einen eindeutigen Namen benötigt. Halten Sie sich an die Namenskonventionen – eindeutige Namen für einzelne Eingabefelder, ein Name für Checkbox- oder Radio-Button-Gruppen, dann funktioniert das Plugin wunderbar.
    Besitzt Ihre Anwendung nur eine Anmeldeform, dann ist das Plugin vermutlich eine Nummer zu groß und es wäre schwer, mit dieser Dateigröße zu leben. Nutzen Sie das Plugin aber irgendwo auf einer Site, kann es auch für die Anmeldeform verwendet werden.

Eingabemasken für Felder erstellen
    Problem
    Es gibt eine Reihe von Eingabetypen, bei denen man sich gerne vertippt, wie zum Beispiel bei Kreditkarten-Nummern. Ein schlichter Tippfehler, der nicht gleich bemerkt wird, kann später zu seltsamen Fehlern führen. Das gilt auch für Datumswerte oder Telefonnummern. Alle haben ein paar gemeinsame Eigenschaften:
    Feste Länge
Größtenteils aus Ziffern bestehend
Trennzeichen an bestimmten Positionen
    Lösung
    Ein jQuery-Plugin, das die Eingabe unterstützen kann, ist das Masked Input-Plugin . Es wird auf ein oder mehrere Eingabefelder angewandt, um festzulegen, was man eingeben kann, während gleichzeitig die Feldtrenner automatisch ergänzt werden.
    In diesem Beispiel wird eine (nordamerikanische) Telefonnummer erwartet:



    
    
    


    

     Telefon
    
    

    Die Plugin-Datei wird nach jQuery eingebunden. Im ready-Callback wird das Eingabefeld mit der ID
phone
selektiert und die Methode
mask
aufgerufen. Dabei wird mit dem Argument angegeben, welche Maske zu verwenden ist – hier ein Format für nordamerikanische Telefonnummern.
    Diskussion
    Beim Definieren der Maske gibt es vier Zeichen mit einer besonderen Bedeutung:
    a
Beliebiger Buchstabe (a−z und A−Z)
    9
Beliebige Ziffer (0–9)
    *
Beliebiges alphanumerisches Zeichen (a–z, A–Z und 0–9)
    ?
Alles nach diesem Zeichen ist optional
    Alle anderen Zeichen – wie zum Beispiel die Klammern oder der Bindestrich in der Maske für
phone
– werden als Literale angesehen, die das Plugin automatisch einfügt und die der Anwender auch nicht entfernen kann.
    Standardmäßig fügt das Plugin einen Unterstrich (_) für jedes variable Zeichen ein. Beim Telefonbeispiel würde das Eingabefeld mit Erhalt des Fokus folgenden Wert anzeigen:
(___) ___-____

    Wenn der Anwender mit der Eingabe der Daten beginnt, wird der erste Unterstrich ersetzt, wenn es sich um ein gültiges Zeichen handelt – hier eine Ziffer. Die anderen Literale werden dabei übersprungen.
    Der Unterstrich kann auch angepasst werden, indem man ein zusätzliches Argument mitgibt:
$("#phone").mask("(999) 999-9999", {placeholder: " "});
    In diesem Fall würde ein Leerzeichen anstelle des Unterstrichs angezeigt.
    Es ist auch möglich, neue Masken-Zeichen zu definieren:
$.mask.definitions['~'] = '[+−]';
$("#eyescript").mask("~9.99 ~9.99 999");
    Hier ist das neue Masken-Zeichen eine Tilde, durch die + und − eingegeben