jQuery-Plugin: Leere Formulare verhindern

16.12.2010 in: Javascript, Suchmaschinen und Webdesign • 7 Kommentare

Für ein Projekt habe ich mein Script für das Abfangen leer abgesandter Suchformulare in ein jQuery-Plugin gepresst.

So sieht das aus:

/**
 * Stop empty searches
 *
 * @author Thomas Scholz http://toscho.de
 * @param  $ jQuery object
 * @return bool|object
 */
(function( $ ) {
    $.fn.preventEmptySubmit = function( options ) {
        var settings = {
            inputselector: "#s",
            msg          : "Wenn Sie nach nichts suchen, werden Sie nichts finden."
        };
        if ( options ) {
            $.extend( settings, options );
        };
        this.submit( function() {
            var s = $( this ).find( settings.inputselector );
            if ( ! s.val() ) {
                alert( settings.msg );
                s.focus();
                return false;
            }
            return true;
        });
        return this;
    };
})( jQuery );

Die Funktion preventEmptySubmit() wird an ein jQuery-Objekt gebunden; sie kann die Parameter inputselector und msg empfangen.

Hat das Formular also die id searchform und das Eingabefeld die id s, so bindet man die Kontrolle so ein:

jQuery( "#searchform" ).preventEmptySubmit();

Will man die Nachricht ändern, übergibt man einfach einen anderen Wert für msg:

jQuery( "#searchform" ).preventEmptySubmit({ "msg": "Nichts geht nicht!" });

Das sieht dann so aus:

Ich verstehe von Javascript nicht viel. Jeder Hinweis oder Vorschlag ist mir willkommen.

Weitere Artikel mit loser Verwandschaft

• jQuery: Interne Sprungziele anbieten
• Suchformular in HTML5
• Evidentes Design
• Safari in CSS und Javascript ansprechen

7 Kommentare

1. Struppi am 16.12.2010 · 09:49

   2 Vorschläge

   Die Schlüssel für die Objekte müssen nicht in Anführungszeichen stehen.

   var settings = {
               inputselector: "#s",
               msg          : "Wenn Sie nach nichts suchen, werden Sie nichts finden."
           };

   Sieht meiner Meinung nach besser aus.

   Und ein leeren String kannst du auch einfach mit dem Not-Operator prüfen
   if(!s.value)

   und eine Korrektur.

   this.s.value müßte eigentlich falsch sein, da this in dem Kontext das Formular sein sollte, folglich dürfte es auch kein Objekt s geben.

2. Thomas Scholz am 16.12.2010 · 10:05

   @Struppi: Auf deine Hinweise habe ich im Stillen schon gewartet. :)

   Da ich den Wert mit Anführungszeichen in settings["inputselector"] referenzieren muß, finde ich die einheitliche Schreibweise irgendwie schlüssiger. Ist wohl Geschmackssache.

   Die Prüfung des leeren Strings habe ich mal so eingebaut.

   this.s.value funktioniert, wenn this ein Formular ist und s ein Eingabefeld. Trotzdem unnötig, also habe ich das auch rausgeworfen.

   Danke!

3. molily am 16.12.2010 · 12:05

   Ich würde erwarten, dass der inputselector relativ zum form-Element funktioniert:

   var s = $(this).find(settings.inputselector);

   Außerdem ist s eine jQuery-Instanz, es müsste also s[0].value oder s.val() heißen, oder? Das jQuery-Objekt hat natürlich keine value-Eigenschaft.

4. molily am 16.12.2010 · 12:08

   Da ich den Wert mit Anführungszeichen in settings["inputselector"] referenzieren muß

   Musst du nicht. objekt.eigenschaft ist identisch mit objekt["eigenschaft"]. Du kannst also settings.inputselector schreiben (siehe mein Beispiel).

5. Thomas Scholz am 16.12.2010 · 12:40

   @molily:

   Ich würde erwarten, dass der inputselector relativ zum form-Element funktioniert:

   Hm, ja, natürlich. Aber da ich ja ohnehin nur ein Element erfasse und nicht mehrere, habe ich das für nicht nötig gehalten. Allerdings kann ich den Selektor mit deiner Variante als Klassennamen angeben – dann funktioniert das zuverlässiger. Cool.

   Außerdem ist s eine jQuery-Instanz, es müsste also s[0].value oder s.val() heißen, oder? Das jQuery-Objekt hat natürlich keine value-Eigenschaft.

   Ähm … ja. Da habe ich mich doch glatt an jQuery vorbeigemogelt. :)
   Das ist genauso ein Fall wie objekt.eigenschaft (viel schöner, danke!): In Javascript bringen oft komplett unterschiedliche Schreibweisen identische Ergebnisse zutage. Daran kann ich mich einfach nicht gewöhnen. Ich habe zwar schon eine Menge gelesen aber mangels hilfreicher Fehlermeldungen leider auch wieder vergessen.

   Danke auch dir für die Hinweise. Ist doch ganz gut, daß ich mal wieder was gebloggt habe.

6. Twigg am 06.04.2011 · 15:29

   Gibt es für den Einstieg irgendwo ein gutes deutsches Tutorial zu jQuery?

7. Elektrokamin Garvens am 11.05.2011 · 08:58

   Einen ähnlichen Ansatz verwende ich auch. Die Art der Validierung trage ich als class Attribut und die Fehlermeldung trage ich als title Attribut ein.

   Vor dem Abschicken des Formulars schaut sich das Validierungs-Skript alle Klassn der Eingabe-Elemente an und ruft gemäß der Validierungs-Klassen die dazugehörige Validierungsfunktion auf. Im Fehlerfall wird der der title-Text ausgelesen und ausgegeben.

   z.B.:
   <input type="text" name="suche" class="required validate-length-40" title="Bitte geben Sie einen Suchtext ein (max. 40 Zeichen)."<

   Inputs mit der Klasse "required" dürfen nicht leer sein. Die Klasse validate-length-40 gibt an, das der String maximal 40 Zeichen lang sein darf.

   Der Vorteil dieses Ansatzes ist, das Projekt-spezifische Änderungen im HTML-Formular-Code geschehen. Der JavaScript-Code muss nur sehr selten angepasst werden.