PHPGangsta - Der praktische PHP Blog

PHP Blog von PHPGangsta


Pflichtfelder mit Sternchen markieren via CSS

with 7 comments

Oft möchte man in einem Formular eine Prüfung einbinden, die anschlägt, wenn das Feld nicht gefüllt wurde. Das geht mit dem Zend Framework und Zend_Form sehr einfach:

class Wb_Form_Subscription extends Zend_Form
{
	public function __construct($options = null)
	{
		$element = new Zend_Form_Element_Text('Email');
		$element->setLabel('Email')
				->setRequired(true);
		$this->addElement($element);
	}
}

Mit der setRequired() Funktion fügen wir automatisch eine NotEmpty-Prüfung hinzu, außerdem erhält das Element die CSS-Klasse „required“:

<label for="Email" class="required">Email</label>

Wenn das Formular nun abgeschickt wird und das Feld leer bleibt, erhalten wir eine Fehlermeldung. Diese werden wir nachher noch anpassen. Doch erst möchten wir noch das Feld als Pflichtfeld markieren, mit einem kleinen roten Stern, so wie hier:

required_star

Das können wir auf 3 Arten erledigen, wobei die dritte mein Favorit ist:

$element->setLabel('Email *')
$element->getDecorator('label')->setOption('requiredSuffix', ' * ');

oder via CSS:

.required {
	background-image:url(/img/required-field.png);
	background-position:top right;
	background-repeat:no-repeat;
	padding-right:10px;
}

Eine Beispieldatei kann hier required-field runtergeladen werden.

Achso, die englische Fehlermeldung wollen wir noch anpassen, das geht so:

$element = new Zend_Form_Element_Text('Email');
$element->setLabel('Email')
		->setAttrib('size', 90)
		->setRequired(true)
		->addErrorMessage('Diese Email-Adresse ist ungültig')
		->addValidator('EmailAddress');
$this->addElement($element);

Wenn man für die verschiedenen Validatoren unterschiedliche Fehlermeldungen haben möchte, geht das so:

$element = new Zend_Form_Element_Text('Email');
$element->setLabel('Email')
		->setAttrib('size', 90)
		->setRequired(true)
		->addValidator('NotEmpty', false, array('messages' => 'Leer'))
		->addValidator('EmailAddress', false, array('messages' => 'Ungültig'));
$this->addElement($element);

error_messages

Möchte man nur eine Fehlermeldung haben, muss man den zweiten Parameter ($breakChainOnFailure) auf true setzen. Sobald ein Validator fehlschlägt, wird die Prüfung aller weiteren Validatoren abgebrochen.

Setzt man Zend_Translate ein, sollte man übrigens die Fehlermeldungen mittels Zend_Translate übersetzen lassen, und nicht so wie oben gezeigt. Dazu fügt man einfach eine neue Übersetzung hinzu, mit dem Schlüssel, der sich in den Klassenkonstanten der jeweiligen Validator-Klasse versteckt, wie hier beispielsweise beim EmailAddress-Validator.

Written by Michael Kliewe

Dezember 14th, 2009 at 9:50 am

Posted in PHP

Tagged with , , ,

7 Responses to 'Pflichtfelder mit Sternchen markieren via CSS'

Subscribe to comments with RSS or TrackBack to 'Pflichtfelder mit Sternchen markieren via CSS'.

  1. Hui, ist mir noch gar nicht aufgefallen das die required-Klasse gesetzt wird. Danke dafür 🙂

    Ben Rexin

    14 Dez 09 at 14:26

  2. Die 3 Variante ist auch semantisch am saubersten, gefällt mir auch am besten.

    Wobei mein Liebling ja die CSS Pseudoklasse :after wäre, aber die wird ja leider nicht weithin unterstützt.

    Kevin

    15 Dez 09 at 00:57

  3. Sehr schön,

    das mit CSS gefällt mir auch am besten, obwohl Zend da natürlich auch daran gedacht hat.

    Christian Hünniger

    16 Dez 09 at 22:24

  4. Warum immer nur „__construct“??? Zend_Form hat eine „init“-Methode!

    Markus U.

    21 Dez 09 at 17:43

  5. @Markus: Ich persönlich nutze häufig den Konstruktor, da ich $options übergeben möchte.

    In diesem Beispiel wäre init() wohl besser gewesen, da es keine Optionen gibt.

    Michael Kliewe

    21 Dez 09 at 17:49

  6. Ich denke die einfachste Methode ist über den Decorator das Asterik zu setzen. Er bietet nämlich die Möglichkeit das Escapen zu deaktivieren. Somit kann dem Asterik einfach eine Klasse mitgeteilt werden.

    CSS:
    .req { margin-left: 5px; color: #DB6464; }

    PHP:
    $this->setElementDecorators(array(‚Label‘, array(‚escape‘ => false, ‚requiredSuffix‘ => ‚ *‘)));

    Stillmatic

    31 Mai 12 at 13:15

  7. Um das Asterik sollte natürlich ein span mit der Klasse liegen.

    Stillmatic

    31 Mai 12 at 13:16

Leave a Reply

You can add images to your comment by clicking here.