Suche
Teilen
startseite » forum

[Frage] Powermail Label Farbänderung bei nicht ausgefülltem Pflichtfeld? [Gelöst] TYPO3-Version: -

  • thewrestler thewrestl...
    TYPO3-Anwärter
    0 x
    5 Beiträge
    0 Hilfreiche Beiträge
    26. 12. 2014, 16:08

    Ein verschneites "servus" aus Bayern,

    ich versuche seit mehreren Stunden ein Powermail-Formular über Typoskript / CSS anzupassen finde aber leider über Google nichts was genau in diese Richtung geht.

    Ich würde gerne die Schriftfarbe eines Powermail-Labels ändern sobald das Formular abgeschickt wurde und das zugehörige Pflichtfeld nicht ausgefüllt wurde. Es würde ggf. auch schon reichen wenn nur das Pflichtfeld (Input, Select oder Radio) selbst eine rote Border bekommt wenn das Formular abgeschickt wird und das Feld nicht ausgefüllt wird. Ich habe dazu per Firebug versucht herauszufinden ob Powermail ggf. über Javascript nachträglich eine "error-Klasse" für nicht gefüllte Pflichtfelder setzt aber finden konnte ich da leider nichts.

    Hat jemand von euch eine Idee ob das überhaupt ohne größeres Geraffel machbar ist?

    Viele Grüße

    TheWrestler

    Tags: Powermail , Pflichtfeld
  • einpraegsam.net einpraegs...
    MacGyver
    1 x
    9340 Beiträge
    80 Hilfreiche Beiträge
    02. 01. 2015, 15:15 - Lösung

    Es gibt in powermail 2.1 drei verschiedene Validatoren:

    • clientseitige, native Validatoren im Browser (HTML5)
    • clientseitige Validatoren im Browser (JavaScript)
    • serverseitige Validatoren (Php)

    Die beiden clientseitigen Validatoren funktionieren mit den jQuery-Plugin parsley.js (siehe parsleyjs.org). Natürlich lässt sich eine HTML5-Fehlermeldung vom Browser optisch nicht anpassen. Außerdem sehen die Meldungen von Browser zu Browser unterschiedlich aus. Die Vor- und Nachteile will ich jetzt nicht alle aufzählen, aber wenn du die Fehlermeldungen optisch anders haben willst, kannst du die HTML5-Meldungen durch TypoScript Setup deaktivieren:

    1. plugin.tx_powermail.settings.setup.validation {
    2. 	# enable native HTML5 validation
    3. 	native = 0
    4.  
    5. 	# enable clientside validation
    6. 	client = 1
    7.  
    8. 	# enable serverside validation
    9. 	server = 1
    10. }

    Generell gilt, dass man per CSS stark eingreifen können sollte.

    Hier mal ein paar Beispiele von der Teststrecke:

    in2code.de - Wir leben TYPO3
    - Möchtest du TYPO3 komplett verstehen? Eigene Erweiterungen erstellen? Bei uns gibt es auch Schulungen https://www.in2code.de/produkte/typo3-schulungen/
    - Die Arbeit mit TYPO3 macht dir Spaß? Du stehst auf Berge? Komm zu uns! https://www.in2code.de/agentur/karriere/

  • 1
  • thewrestler thewrestl...
    TYPO3-Anwärter
    0 x
    5 Beiträge
    0 Hilfreiche Beiträge
    26. 12. 2014, 16:36

    sorry noch zu den Versionen....

    Typo3 6.2.9
    Powermail 2.1.8

    *EDIT*

    Hat sich erledigt. Nachdem ich die Validierung des Formulars über Javascript bzw. HTML5 im Browser deaktiviert hatte (geht über Template-Konstanten von Powermail oder per Typoskript) und somit die serverseitige Validierung per PHP greift erscheint nun beim abschicken des Formulars bei nicht ausgefüllten Pflichtfeldern auch die entsprechende CSS Klasse und man kann die Felder per CSS wie man es braucht anpassen.

  • einpraegsam.net einpraegs...
    MacGyver
    1 x
    9340 Beiträge
    80 Hilfreiche Beiträge
    02. 01. 2015, 15:15

    Es gibt in powermail 2.1 drei verschiedene Validatoren:

    • clientseitige, native Validatoren im Browser (HTML5)
    • clientseitige Validatoren im Browser (JavaScript)
    • serverseitige Validatoren (Php)

    Die beiden clientseitigen Validatoren funktionieren mit den jQuery-Plugin parsley.js (siehe parsleyjs.org). Natürlich lässt sich eine HTML5-Fehlermeldung vom Browser optisch nicht anpassen. Außerdem sehen die Meldungen von Browser zu Browser unterschiedlich aus. Die Vor- und Nachteile will ich jetzt nicht alle aufzählen, aber wenn du die Fehlermeldungen optisch anders haben willst, kannst du die HTML5-Meldungen durch TypoScript Setup deaktivieren:

    1. plugin.tx_powermail.settings.setup.validation {
    2. 	# enable native HTML5 validation
    3. 	native = 0
    4.  
    5. 	# enable clientside validation
    6. 	client = 1
    7.  
    8. 	# enable serverside validation
    9. 	server = 1
    10. }

    Generell gilt, dass man per CSS stark eingreifen können sollte.

    Hier mal ein paar Beispiele von der Teststrecke:

    in2code.de - Wir leben TYPO3
    - Möchtest du TYPO3 komplett verstehen? Eigene Erweiterungen erstellen? Bei uns gibt es auch Schulungen https://www.in2code.de/produkte/typo3-schulungen/
    - Die Arbeit mit TYPO3 macht dir Spaß? Du stehst auf Berge? Komm zu uns! https://www.in2code.de/agentur/karriere/

  • thewrestler thewrestl...
    TYPO3-Anwärter
    0 x
    5 Beiträge
    0 Hilfreiche Beiträge
    07. 01. 2015, 21:14

    Vielen Dank für diese ausführliche Antwort :)

  • einpraegsam.net einpraegs...
    MacGyver
    0 x
    9340 Beiträge
    80 Hilfreiche Beiträge
    13. 01. 2015, 09:05

    Hier noch eine Ergänzung dazu:
    http://webdesign-forum.net/thread-3279.html

    in2code.de - Wir leben TYPO3
    - Möchtest du TYPO3 komplett verstehen? Eigene Erweiterungen erstellen? Bei uns gibt es auch Schulungen https://www.in2code.de/produkte/typo3-schulungen/
    - Die Arbeit mit TYPO3 macht dir Spaß? Du stehst auf Berge? Komm zu uns! https://www.in2code.de/agentur/karriere/

  • 1
Präsentiert von
Mittwald
Nützliche Links
TYPO3 Dokumentation
eStrategy
webworker Magazin