Formulardatenvalidierung auf Websites – HTML, JavaScript, PHP oder alles zusammen?

  • HTML

Es gibt 10 Antworten in diesem Thema. Der letzte Beitrag () ist von Marcus Gräfe.

    Formulardatenvalidierung auf Websites – HTML, JavaScript, PHP oder alles zusammen?

    Ich habe mal eine allgemeine Frage in die Runde, wie ihr das handhabt. Es geht um die Validierung von Eingaben in Input-Feldern bei Formularen auf Websites, z. B. Kontaktformular, Bestellformular usw.

    Es gibt drei (mir bekannte) Validierungsmöglichkeiten:

    1.) HTML (z. B. das required-Attribut oder Definierung des Feldes als Mailadresse)
    2.) JavaScript
    3.) PHP (oder was auch immer das Ziel für die Formulardaten ist)

    Ich mache im Moment alle drei Validierungen, weil der Browser evtl. so alt ist, dass die entsprechenden HTML-Tricks nicht funktionieren oder weil man JavaScript deaktiviert hat. Nur auf PHP-Basis schadet aber dem Komfort, weil man nicht sofort fehlerhafte Eingaben sieht (außer via AJAX, aber das erfordert wiederum JS).

    Das Problem: Man muss eben alle drei Varianten programmieren. Besonders JS und PHP sind quasi 1:1 identisch.

    Aber macht man das so? Die Frage geht also in Richtung "Wie läuft Formulardatenvalidierung im Jahr 2020 ab?".

    Ich denke aber, dass die Prüfung auf PHP-Ebene die wichtigste ist, weil das kann man nicht umgehen.
    Besucht auch mein anderes Forum:
    Das Amateurfilm-Forum
    Ich gehe immer auf nummer sicher, validiere wo ich kann. Never trust user input. Ich nehm eine form, ohne submit input, beim click eines Buttons validieren und via js form.submit(), oder auch Fehler anzeigen. Auf PHP-Seite kannst du nie sicher sein das nur dein js da was schickt, also auch in PHP auf nummer sicher gehen.

    Das required attribute brauchst du auf dieser Weise nicht. Ich hab immer versteckte Elemente welche ich im Fehlerfall sichtbar mache, so das eine Fehlermeldung erscheint.
    @Takafusa
    Danke. Ohne Submit-Button wird allerdings JavaScript benötigt. In meinen Augen wenig barrierefrei. Daher habe ich zusätzlich noch das Required-Attribut, damit der Browser selbst noch validiert.

    @wolfi_bayern
    Leider hilft der gar nicht. a) geht es bei mir nicht um ASP und b) ist die Frage eher allgemeiner Natur. Das technische "Wie" kenne ich bereits, nur "Ob" ist die Frage.

    Weitere Meinungen zum Thema sind willkommen!
    Besucht auch mein anderes Forum:
    Das Amateurfilm-Forum
    Kann da @Takafusa eigentlich nur zustimmen, User input sollte man niemals vertrauen, weswegen ich das ganze in zwei Kategorien einteilen würde:
    1. Schutz der Anwendung
    2. Eyecandy

    Generell würde ich behaupten, alles was nicht fest definiert ist sollte immer überprüft werden.

    In dem Fall Serverseitige Validierung, alles andere (HTML/JS/...) ist nur für die Anwenderfreundlichkeit.
    Da würde ich bei Webseiten generell erst mal den Standard implementieren, heißt die richtigen Input Typen für die Felder (Email, URL, Password ...) und ob "required" oder nicht (+ css "valid"/"invalid"), es gibt auch noch das Attribut "pattern".

    Auf Validierung mit JS würde ich verzichten, sofern es mit den gegebenen Funktionen umsetzbar ist.
    Auch würde ich keinen Rücksicht auf uralte Browser nehmen, aber das ist meiner persönlichen Überzeugung geschuldet. Ausnahme: Der Kunde wünscht es explizit, aber dann weiße ich auch auf den Mehraufwand etc. hin und sage denen das ich das für keine gute Idee halte.

    slice schrieb:

    Auf Validierung mit JS würde ich verzichten, sofern es mit den gegebenen Funktionen umsetzbar ist

    Ich weiß nicht, ob man mittels des pattern-Attributs alles hinbekommt, aber ich hatte z. B. folgende Fälle, für die ich JS einsetzen musste:

    - PLZ-Feld: 5 Ziffern, nicht mehr und nicht weniger. Ein type=number-Feld kommt nicht in Frage, weil ich keinen Hoch- oder Runtzerzählbutton haben will (vielleicht aber mittels CSS ausblendbar)
    - E-Mail: type=email erlaubt folgende Mailadresse: x@x. Ich sehe aber nur x@x.x als korrekt an.
    - Felder, die dynamisch als erforderlich gekennzeichnet werden, z. B. in Abhängigkeit von einer Checkbox

    Im Moment habe ich required überall weggemacht und nur mein JS aktiviert, weil es sonst in den genannten Fällen Inkonsistenzen zwischen meinem JS und der Browserprüfung gibt (Browser sagt OK, JS nicht).

    slice schrieb:

    Auch würde ich keinen Rücksicht auf uralte Browser nehmen

    Das bezog sich auch nur auf Dinge wie das required. Da auf PHP-Ebene nochmal geprüft wird, hat man im Prinzip auch alte Browser unterstützt. ;)
    Besucht auch mein anderes Forum:
    Das Amateurfilm-Forum
    Ich benutze immer gerne Javascript, z.B. bei Registrierungen, da finde ich es schöner wenn direkt im Formular sichtbar ist ob ein Username bereits vergeben ist, ohne einen neuen Seitenaufruf. Aber wie schon slice sagte:
    2. Eyecandy
    PLZ: <input type="text" id="pwd" name="pwd" pattern="\d{5}" title="Must contain five digits">
    Email: x@y ist eine valide Emailadresse, schau mal ins RFC, wenn der Benutzer eine falsche Emailadresse abgibt, bekommt er halt keinen Zugriff, weil er sie nicht bestätigen kann
    Dynamische Felder: Da gibt es wohl keinen Weg an JS vorbei
    Ältere Browser: Bedeutet aber ein zusätzlicher Roundtrip (Client -> Server -> Client), wenn du es nach Standard implementierst, muss der Benutzer erst gar nicht zum Server, weil der Browser das schon checkt.
    @slice
    Bzgl. der PLZ habe ich in JS tatsächlich exakt diesen regulären Ausdruck (zumindest fast exakt: /\d{5}/g). pattern scheint also eine Alternative zum JS zu sein.

    Bzgl E-Mail: Ja, schon klar, aber ist das eine gültige öffentliche Adresse? Meiner Meinung nach kann eine Adresse ohne .TLD nur in einem Intranet vorliegen.

    Bzgl. älterer Browser:

    wenn du es nach Standard implementierst

    Was meinst du mit "Standard"? required & Co.? Denn genau das ist doch das, was ältere Browser nicht unterstützen. Um das JS mache ich mir keine Gedanken. Z. B. das minlength-Attribut ist noch extrem neu.

    Ich denke, ich werde es, zumindest vorerst, mit JS machen (und PHP, natürlich). Zwar definiere ich Felder als email, number usw., weil das auf dem Handy direkt die passende Bildschirmtastatur ergibt und somit sehr praktisch ist, aber auf den Rest verzichte ich aufgrund der angesprochenen Inkonsistenz erstmal. Wobei es z. B. beim Mailadressencheck dann trotzdem diese Inkonsistenz gibt.

    Danke für euren Input soweit, das hat mir auf jeden Fall schon weitergeholfen! Gerne höre ich aber noch weitere Ideen zum Thema, seht es als einen Diskussionsthread an. ;)
    Besucht auch mein anderes Forum:
    Das Amateurfilm-Forum
    Ist eine valide Adresse, bringt im "öffentlichen" Netz natürlich nichts und sollte auch nicht vorkommen, aber ist trotzdem valide. Du könntest da auch mit Pattern arbeiten :D

    Genau das mein ich damit, also den HTML5 Standard. Wenn du den benutzt sparst du dir den Roundtrip, sofern du kein JS zusätzlich benutzt.
    Bei meinem aktuellen Projekt habe ich es nun, wie bereits erwähnt, neben dem PHP-Check hauptsächlich mit JavaScript gemacht, hier und da mit kleiner Unterstützung der HTML5-Attribute.

    Ich habe mir aber jetzt vorgenommen, beim nächsten Mal quasi alles via HTML zu lösen. Spart Programmieraufwand und lässt sich vom User, sofern er einen modernen Browser hat, nicht umgehen (vermute ich).

    Dennoch wird man um JS nicht drumherum kommen. Ein Beispiel ist das angesprochene dynamische Pflichtfeld.

    Danke euch!
    Besucht auch mein anderes Forum:
    Das Amateurfilm-Forum