gestaltende_forms

Gestaltende Forms

Formular Engine mit Validierung im Browser und auf dem Server.

Für die Validierung im Browser wird Parsley.js verwendet. siehe auch http://parsleyjs.org

Die Extension erweitert die Fluid Form und Field ViewHelper, um die zusätzlichen Informationen für Parsley.js einzufügen.

Man kann somit bestehende Formulare einfach umbauen, in dem man den Namespace ändert.

{namespace gf=Gestaltende\Forms\ViewHelpers}
<f:form ... /> wird zu <gf:form .../>
<f:form.textfield .../> wird zu <gf:form.textfield/>
und so fort 

Hier ein Beispiel Formular als Snippet gestaltende.typo3/gestaltende_forms

Es gibt auch neue Feldelemente

<gf:form.alphanum.html .../>
<gf:form.digits.html .../>
<gf:form.email.html .../>
<gf:form.integer.html .../>
<gf:form.number.html .../>
<gf:form.range.html .../>
<gf:form.reCaptcha.html .../>
<gf:form.url.html .../>

Des weiteren wird für die Ausgabe des Formulars und der Felder Fluid Template verwendet.

Form.html - Das Template für die Ausgabe des Formulars

{namespace gf=Gestaltende\Forms\ViewHelpers}{namespace g=Gestaltende\Vhs\ViewHelpers}
<div xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers" xmlns:flux="http://typo3.org/ns/FluidTYPO3/Flux/ViewHelpers" xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers" xmlns="http://www.w3.org/1999/xhtml" lang="de" f:schemaLocation="https://fluidtypo3.org/schemas/fluid-master.xsd" flux:schemaLocation="https://fluidtypo3.org/schemas/flux-master.xsd" v:schemaLocation="https://fluidtypo3.org/schemas/vhs-master.xsd">

    <f:layout name="Default"/>

    <f:section name="Main">
        <v:asset.script movable="true" standalone="true" name="parsley-config" path="EXT:gestaltende_forms/Resources/Public/Js/config.js"/>
        <v:asset.script movable="true" standalone="true" name="parsley" path="EXT:gestaltende_forms/Resources/Public/Js/Vendor/Parsley/parsley.min.js"/>
        <v:asset.script movable="true" standalone="true" name="parsley-remote" path="EXT:gestaltende_forms/Resources/Public/Js/Vendor/Parsley/parsley.remote.min.js"/>
        <v:asset.script movable="true" standalone="true" name="parsley-de" path="EXT:gestaltende_forms/Resources/Public/Js/Vendor/Parsley/i18n/de.js"/>
        <v:asset.script movable="true" standalone="true" name="parsley-de-extra" path="EXT:gestaltende_forms/Resources/Public/Js/Vendor/Parsley/i18n/de.extra.js"/>
        <v:asset.style standalone="true" name="parsley-css" path="EXT:gestaltende_forms/Resources/Public/Css/Vendor/Parsley/parsley.css"/>

        <div class="formidable">
        <gf:renderForm/>
        </div>

    </f:section>
</div>

Label.html - Das Template für die Ausgabe des Labels

<f:if condition="{label}">
    <label for="{fieldId}">{label}</label>
</f:if>

ErrorMessage.html - Das Template für die Ausgabe der Fehlermeldungen

<f:if condition="{error}">
    <small class="error">{error}</small>
</f:if>
<f:form.validationResults for="{objectname}.{fieldname}">
    <f:if condition="{validationResults.flattenedErrors}">
        <small class="error">
            <f:for each="{validationResults.errors}" as="errorMessage">
                {errorMessage}<br>
            </f:for>
        </small>
    </f:if>
</f:form.validationResults>

Textfield.html - Das Template für das Textfeld

{namespace gf=Gestaltende\Forms\ViewHelpers}

<f:layout name="Default"/>

<f:section name="Main">
    <gf:renderLabel/>
    <gf:renderField/>
    <gf:renderErrorMessage/>
</f:section>

ViewHelper für die Ausgabe

<gf:renderForm/> - Rendert das gesamte Formular - wird in Form.html eingesetzt.

<gf:renderLabel/> - Rendert den aktuellen Label - wird in einem Field Template eingesetzt.

<gf:renderField/> - Rendert das aktuelle Feld - wird in einem Field Template eingesetzt.

<gf:renderErrorMessage/> - Rendert die aktuelle Fehlermedlung des aktuellen Feldes - wird in einem Field Template eingesetzt.

Somit kann über die Fluid Templates das Aussehen der Formulate bequem angepasst werden.