Ankündigung

Einklappen
Keine Ankündigung bisher.

Fehlerfelder von HTML5 für eigene Fehlermeldungen nutzen.

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Fehlerfelder von HTML5 für eigene Fehlermeldungen nutzen.

    Hallo,

    eigentlich sagt die Überschrift schon alles:
    Ich möchte die praktischen Formularfehlermeldungen von HTML5 (z.B. wenn man das Attribut "required" an ein Engabefeld heftet und man es leer abschicken möchte, kommt die Fehlermeldung: "Bitte füllen sie dieses Feld aus!") mit eigenen Fehlermeldungen nutzen.
    Ganz konkret bei der Registrierung:
    Es gibt zwei PAsswortfelder und wenn bei der Prüfung mit Javascript (bzw. JQuery) heraus kommt, dass sie nicht gleich sind, soll eine Entsprechene Fehlermeldung über die hübschen HTML5 Fehlerfelder erscheinen...

    Ich hoffe ihr versteht, was ich meine.

    Danke schnmal!

  • #2
    Die hübschen Fehlerfelder macht aber nicht HTML5, sondern der Browser.

    Um ein eigenes "Fehlerfeld" wirst du also nicht drumrumkommen ^^

    Kommentar


    • #3
      Aber kann ich diese Browserinternen Fehlerfelder nicht für meine Zwecke nutzen?

      Kommentar


      • #4
        Zitat von ballotade Beitrag anzeigen
        Aber kann ich diese Browserinternen Fehlerfelder nicht für meine Zwecke nutzen?
        Nein.

        Spaßeshalber ein Beispiel dazu, nicht wirklich für den Produktiveinsatz geeignet:
        http://jsfiddle.net/7y5r8tgo/1/
        [QUOTE=nikosch]Macht doch alle was Ihr wollt mit Eurem Billigscheiß. Von mir aus sollen alle Eure Server abrauchen.[/QUOTE]

        Kommentar


        • #5
          Schade, aber Deine Idee ist auch nicht schlecht!
          So muss ich die Fehlermeldungen wohl oder Übel selbst machen, denn es sieht doch doof aus, wenn teils HTML5- (bzw. Browser-) und teils meine eigene Meldungen erscheinen und sie nicht gleich aussehen und reagieren.

          Apropos: Wie bekommt man diese kleinen Ausstülpungen hin, mit denen die Browser-Nachricht auf das entsprechende Feld zeigt?

          Kommentar


          • #6
            Z. B. in dem du dir anschaust wie das bei Tooltips gemacht wird. Ein Beispiel: http://pixelbar.be/blog/css-profi-ti...ip-attributen/ bzw. direkt die Demo: http://jsfiddle.net/cxSc9/1/ Dort wird ::before gestyled. Für die Form ist das Styling für die Borders verantwortlich:
            Code:
                border-top: 20px solid #ffcb66;
                border-left: 20px solid transparent;
                border-right: 20px solid transparent;

            Kommentar


            • #7
              Super!!!
              Ich verstehe zwar immer noch nicht, wie der "Zipfel" des Tooltips entsteht, aber ich probiere es mal aus.

              Kommentar


              • #8
                Ganz blöd gesagt: Rumgetrickse/Ausnutzen mit dem/des Verhalten(s) von border. Schau dir mal das hier an: http://de.selfhtml.org/css/eigenscha...rder_color.htm Am zweiten und dritten Beispiel sieht man wie die borders berechnet werden, an den Ecken wenn top/bottom/left/right border aufeinander treffen siehst du ja diese Diagonale an der sie sich berühren. Das macht man sich bei dem Dreieck-Trick zunutze. Bei Beispiel zwei, schau dir die pinkfarbene obere border an: Stell dir vor das Element das sie umgibt wird immer kleiner, bis es genau 0px breit ist. Dann wäre die pinke border ja auch dreiecksförmig, oder? Nun noch die linke (grün) und rechte (blau) auf transparent als Farbe setzen, so dass sie nicht sichtbar sind (sie müssen ja da sein, damit der Effekt zu stande kommt) und fertig. Die untere Border braucht man nicht, die hat damit nichts zu tun. Deshalb wird in dem Beispiel von eben auch border-bottom nicht gesetzt.

                Kommentar


                • #9
                  Ah, okay, ich bekomme einen Eindruck. Das heißt es gibt zwei Elemente bei diesem Tooltip. Einer für den normalen Inhalt und einer für diesen Zipfel, dessen Größe allerdings auf 0 gesetzt wurde.
                  Das letztere hängt wohl mit der CSS-Pseudoklasse ::before zusammen. Werde ich mal selbst herumexperimentieren damit...

                  Kommentar


                  • #10
                    Zitat von ballotade Beitrag anzeigen
                    Das heißt es gibt zwei Elemente bei diesem Tooltip. Einer für den normalen Inhalt und einer für diesen Zipfel, dessen Größe allerdings auf 0 gesetzt wurde.
                    Richtig.

                    Kommentar


                    • #11
                      Okay, jetzt habe ich den Durchblick!

                      Kommentar

                      Lädt...
                      X