Zum Inhalt
Startseite » Anpassen von Formularfeldern Label – Grid Aufteilung – CSS Verhalten – Validierungsregeln

Anpassen von Formularfeldern Label – Grid Aufteilung – CSS Verhalten – Validierungsregeln

    FS-Online basiert auf Bootstrap, das wohl am meist eingesetzte Framework für Webseiten. Hierzu sollte man sich mit ein paar Grundregeln vertraut machen. In diesem Eintrag geht es darum, selbständig auf “highLevel” Ebene, also nicht programmatisch, trotzdem höchst flexible Anpassungen durchführen zu können. 

    Hierzu empfehlen wir folgenden Link als Nachschlagewerk für die Wissbegierigen unter unseren Kunden: 

    Bootstrap Grid System

    !!! ACHTUNG !!!

    Wichtig zu wissen ist, dass man bei dem Feld “CSS Klassen” in einer Form, diese niemals mischen soll. Wenn man sich also dazu entschieden hat das diese Form mit z.B: Large (col-lg-xx) genutzt werden soll, so ist das bei allen Feldern dieser Form zu nutzen. Es darf nicht ein Feld dazwischen mit col-md-xx oder col-sm-xx oder col-xs-xx beschrieben werden. Da dies bei Größenveränderungen des Browserfensters bzw. anderen Displaygrößen zu einem unschönen oder Fehlerhaften verhalten führt, bis hin dazu das Felder nicht mehr geklickt werden können da diese durch ein anderes überlagert werden. Da eben die “Floating” Eigenschaften auf unterschiedlichen Anzeigegrößen über diese CSS Klassen gesteuert werden. So würde ein Feld sich als “small” verhalten (z.B: col-sm-6) und ein anderes auf der gleichen Display oder anzeige Größe als “Large” (col-lg-6) und damit unterschiedlich aggieren.

    !!! ACHTUNG !!!

    allg. Beschreibung einer Feldverwaltungsübersicht

    Schritt 1 Editieren oder ändern der Felder am entsprechenden Formular

    Schritt 2 Falls sie Validierungsregeln benötigen können sie diese ebenfalls hier anpassen.

    Diese Liste wird immer wieder erweitert.

    Beispiel:

    Kombinationsmöglichkeit zweier Rules bei der PLZ macht durchaus Sinn. Dies erreichen sie indem sie beide Regeln im validation feld mit einem Strichpunkt trennen (data-rule-digits;data-rule-minlength=4)

    RegelBeschreibungBeispiel
    data-rule-email=Truecheck ob es sich um eine gültige E-mail Adresse, syntax handeltbezeichnung.name@domain.com
    data-rule-digits=Truecheck ob die Eingabe Zahlen sind keine Zeichen zulässig12345
    data-rule-minlength=4check ob die Eingabe mindestens 4 Zeichen lang ist.8020
    data-rule-dateDEBirthdate=Truediese Regel ist speziell für den Deutschsprachigen Raum für NGO’s welcher genaue Regelung hat für die Anforderungen der Spendenabsetzbarkeit. Auch keine Geburtstage vor 1900 erlaubt. es können tt.mm.jjjj eingegeben werden. 23.06.1977
    data-rule-dateNL=Truediese Regel ist wie die überliegende Regel. Bezieht sich aber auf das englische Format einer Datumseingabe usw. 23-06-1977
    data-rule-maxlength=8überprüft das Maximal 8 Zeichen eingegeben werden können12345678
       
       
       
       
       
       
       
       

    Schreibe einen Kommentar

    Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert