[HOW-TO/TUTORIAL] prüfen, ob bestimmte Formularfelder ausgefüllt

[j-l-n]

Mit folgendem simplen Skriptschnipsel kann man einfach und schnell prüfen, ob bestimmte Felder in einem Formular leer sind:

/*
• Aufruf:
• check_empty(ID der zu prüfenden Felder)
• Bsp.: check_empty('name', 'ort', 'tel', 'mail')
*/

function check_empty(){
  "use strict";
  //ruft in einer Schleife die an die Funktion übergebenen, zu prüfenden Elemente auf
  for (var x=0; x < arguments.length; x++) {
    var element = document.getElementById(arguments[x]);
    var str = element.value;
    var str = str.replace(/\s/g,""); //Eingaben, die nur aus Leerzeichen bestehen, werden wie ein leeres Feld gewertet
    if(str.length === 0){ //wenn ein Formularfeld leer ist, Fehlermeldung ausgeben
      alert("Das Eingabefeld " + arguments[x] + " ist leer");
      event.preventDefault(); //verhindern, dass Formular abgesendet wird
    }
  }
}

Online-Demo: JavaScript - prüfen, ob bestimmte Formularfelder ausgefüllt

 

[tsseh]

Mit folgendem simplen Skriptschnipsel kann man einfach und schnell prüfen, ob bestimmte Felder in einem Formular leer sind

hmm, wenn du zu diesem thema schon etwas unter tutorials postest, dann doch aber auch in einer qualität, die den namen verdient.
du musst allen formularelementen eine id geben, warum?
wenn die id nicht existiert, kommt ein fehler.
alert ist keine geeignete fehlerausgabe.

Online-Demo:

warum nicht den code hier posten?

 

[kkapsner]

In jedem Browser außer dem IE bekommst du einen Fehler in der Fehlerkonsole und das Formular wird abgeschickt: die globale Variable event existiert nur im IE. Bei allen anderen musst du das Eventobjekt übergeben.

Dafür kennen ältere IEs das .preventDefault() im Eventobjekt nicht...

 

[j-l-n]

du musst allen formularelementen eine id geben, warum?

Weil es explizit darum ging, nur bestimmte Pflichtfelder zu prüfen, und nicht generell jedes Feld im Formular.

alert ist keine geeignete fehlerausgabe.

Ja, das ist mir bewusst. Unsere Tutorials sind zwar fertige Lösungen, aber ein bisschen Transferdenken sollte ein User schon zeigen.
Wenn man sich die Mühe macht und ein Skript für irgendetwas erstellt, und man weiß, dass viele User, die sich hier nicht mal im Forum anmelden, dieses einfach so eins zu eins kopieren und übernehmen, dann können sie das auch tun. Aber dann braucht dieser User nicht erwarten, dass er auch die schönste, umfangreichste und tollste Lösung hat. Ein funktionierendes, simples Skript mit dem Grundprinzip hat er ja trotzdem.

Imho ist ein Tutorial-Forum kein "wir verschenken hier perfekte Skripts, die doch bitte jeder unangemeldete Gast undankbar kopiert und als seine eigenen ausgibt"-Forum...

warum nicht den code hier posten?

Hä? Hab ich doch.

 

[tsseh]

Weil es explizit darum ging, nur bestimmte Pflichtfelder zu prüfen, und nicht generell jedes Feld im Formular.

auch dafür benötige ich keine id

Imho ist ein Tutorial-Forum kein "wir verschenken hier perfekte Skripts, die doch bitte jeder unangemeldete Gast undankbar kopiert und als seine eigenen ausgibt"-Forum...

ein tutorial soll zeigen wie man es richtig macht, und nicht wie es sich jeder 5t-klässler der google bedienen kann es sich in 1 min "aus dem internet zusammengesucht" hat.

Hä? Hab ich doch.

ich sehe nur einen js fetzen, kein funktionierendes beispiel

 

[kkapsner]

Also ich würde das ja mit dem HTML5-Attribut required machen. Wenn der Browser das unterstützt, bekommt man sowieso schon eine Meldung, und wenn nicht, geht man einfach alle Elemente des <form>s durch und schaut nach, ob required gesetzt ist.

 

[j-l-n]

Also ich würde das ja mit dem HTML5-Attribut required machen.

Ja, das ist auch ne Idee. Könnte man sogar mit CSS stylen...

 

[rico2009]

Weils zum Thema passt, noch ein nettes Tool auf JQuery Basis zum Validieren und Überprüfen von Eingabefeldern/Pflichtfeldern/etc.: http://jqueryvalidation.org/

 

[mikdoe]

Da man serverseitig sowieso alles prüfen muss (meistens sind ja auch Plausibilitätsprüfungen gegen die DB dabei) setze ich - wenn überhaupt - nur noch auf HTML5, ich mach clientseitig garkeine Prüfungen in Formularen. Wenn ein Fehler auftritt bekommt der Benutzer das Formular wieder angezeigt, alle Felder sind mit seinen Eingaben vorbelegt und drüber steht die genaue Fehlermeldung.