PatternLab (0.1.259)

# Form

TIP

Combinations of Input Fields, Selects , Buttons, Checkboxes or Radio Buttons.

# Form Validation

TIP

# HTML5 Form Control:

  • minlength and maxlength: Specifies the minimum and maximum length of textual data (strings)
  • min and max: Specifies the minimum and maximum values of numerical input types
  • type: Specifies whether the data needs to be a number, an email address, or some other specific preset type.
  • pattern: Specifies a regular expression that defines a pattern the entered data needs to follow.
  • required attribute is also needed, otherwise an input field with an empty value will be excluded from constraint validation.

Type at least 3 characters into the following field:

hide code 
<input type="text" class="c-input -old" required minlength="3" name="" value="" placeholder="type at least 3 characters ..." />

Datepicker Demo with Pattern

hide code 
<input type="text" class="c-input -old js-datepicker" name="" value="" pattern="([0-1][0-9]|[1-2][0-9]|[1-3][0-1])\.([0][0-9]|[1][0-2])\.(\d\d\d\d)" />

# With Icons and Tooltips

.c-input-container > .c-input.-old.-has-icon[.-error/.-success] + .c-input-container__icon

hide code 
<div class="c-input-container">
    <input type="text" class="c-input -old -has-icon" name="" value=""  placeholder="Default Field" />
    <div class="c-input-container__icon">
        <a class="c-link js-tooltip" data-placement="left" title="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.">
            <i class="fa fa-info-circle"></i>
        </a>
    </div>
</div>
<div class="c-input-container m-y-m">
    <input type="text" class="c-input -old -error -has-icon" name="" value=""  placeholder="Error Field" />
    <div class="c-input-container__icon">
        <a class="c-link -error js-tooltip" data-placement="left" data-additional-tooltip-classes="-error" title="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.">
            <i class="fa fa-exclamation-triangle"></i>
        </a>
    </div>
</div>
<div class="c-input-container">
    <input type="text" class="c-input -old -success -has-icon" name="" value=""  placeholder="Success Field" />
    <div class="c-input-container__icon">
        <a class="c-link -success js-tooltip" data-placement="left" data-additional-tooltip-classes="-success" title="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.">
            <i class="fa fa-check"></i>
        </a>
    </div>
</div>

# CSS-Tooltips (z-index Bug)

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
hide code 
<div class="c-input-container">
    <input type="text" class="c-input -old -has-icon -error m-b-m" name="" value="" placeholder="Error Field" />
    <div class="c-input-container__icon">
        <div class="c-tooltip__trigger -open-left">
            <a class="c-link -error"><i class="fa fa-exclamation-circle"></i></a>
            <div class="c-tooltip -error m-t-l">
                <strong>Lorem ipsum</strong> dolor sit amet 
            </div>
        </div>
    </div>
</div>  
<div class="c-input-container">
    <input type="text" class="c-input -old -has-icon -success m-b-m" name="" value="" placeholder="Success Field" />
    <div class="c-input-container__icon">
        <div class="c-tooltip__trigger -open-left">
            <a class="c-link -success"><i class="fa fa-check"></i></a>
            <div class="c-tooltip -success m-t-l">
                <strong>Lorem ipsum</strong> dolor sit amet 
            </div>
        </div>
    </div>
</div>

# Example Form with Error Messages

# Error / Success Example

.c-float-container.-has-input.-has-btn.-has-error > .c-input + .c-btn.-input.-error

hide code 
<div class="c-float-container -has-input -has-btn -has-error">
    <label class="c-label" for="input-button-1">Floating Label</label>
    <input type="text" class="c-input" data-placeholder=".. and Placeholder Text" id="input-button-1" name="" value="" />
    <button type="button" class="c-btn -square-btn -primary -input -error" title="Speichern">
        <i class="fa fa-save"></i>
    </button>
</div>
<div class="c-float-container -has-input -has-btn -has-warning">
    <label class="c-label" for="input-button-2">Floating Label</label>
    <input type="text" class="c-input" data-placeholder=".. and Placeholder Text" id="input-button-2" name="" value="" />
    <button type="button" class="c-btn -square-btn -primary -input -warning" title="Speichern">
        <i class="fa fa-save"></i>
    </button>
</div>
<div class="c-float-container -has-input -has-btn -has-warning">
    <label class="c-label" for="input-button-2">Floating Label</label>
    <input type="text" class="c-input" data-placeholder=".. and Placeholder Text" id="input-button-2" name="" value="" />
    <button type="button" class="c-btn -square-btn -primary -input -warning" title="Speichern">
        <i class="fa fa-save"></i>
    </button>
</div>
<div class="c-float-container -has-input -has-btn -has-success">
    <label class="c-label" for="input-button-3">Floating Label</label>
    <input type="text" class="c-input" data-placeholder=".. and Placeholder Text" id="input-button-3" name="" value="" />
    <button type="button" class="c-btn -square-btn  -primary -input -success" title="Speichern">
        <i class="fa fa-save"></i>
    </button>
</div>

# Parsley Form with Errors and Captcha

  • Bitte wählen Sie einen Abo-Typ aus.
    • Dies ist ein Pflichtfeld.
    • Dies ist ein Pflichtfeld.
      • Bitte wählen Sie eine Option.
      Vorheriger Schritt Nächster Schritt
      hide code 
      <div id="erroraccounttyp">
    <ul class="parsley-errors-list filled">
        <li class="parsley-custom-error-message">Bitte wählen Sie einen Abo-Typ aus.</li>
    </ul>
</div>

<div class="h-highlight-block h-fullwidth-block m-y-m">
    <fieldset>
        <div class="h-width-60 h-center">
            <div class="c-float-container -has-select -light -is-active">
                <label class="c-label" for="title">Titel</label>
                <select class="c-select js-select2" id="title" data-parsley-id="2877"><option value="" selected="selected"> </option>
                    <option value="Dr.">Dr.</option>
                    <option value="Prof.">Prof.</option>
                    <option value="Priv.-Doz.">Priv.-Doz.</option>
                </select><ul class="parsley-errors-list" id="parsley-id-2877"></ul>
            </div>
            <div class="c-float-container -has-input -light">
                <label class="c-label" for="firstName">Vorname*</label>
                <input data-parsley-errors-container="#errorfirstName" required="" data-parsley-minlength="2" data-parsley-minlength-message="Bitte tragen Sie mindestens 2 Zeichen ein" data-parsley-trigger="focusout" data-parsley-group="block1" class="c-input" id="firstName" type="text" name="tx_registration_base[newFrontendUser][firstName]" data-parsley-id="9186">
            </div>
            <div class="c-float-container -has-input -light parsley-error">
                <div id="errorlastName" class="errorHolder"><ul class="parsley-errors-list filled" id="parsley-id-3150"><li class="parsley-required">Dies ist ein Pflichtfeld.</li></ul></div>
                <label class="c-label" for="lastName">
                    Nachname*
                </label>
                <input data-parsley-errors-container="#errorlastName" required="" data-parsley-minlength="2" data-parsley-minlength-message="Bitte tragen Sie mindestens 2 Zeichen ein" data-parsley-trigger="focusout" data-parsley-group="block1" class="c-input" id="lastName" type="text" name="tx_registration_base[newFrontendUser][lastName]" data-parsley-id="3150">
            </div>
            <div class="c-float-container -has-input -light parsley-error">
                <div id="erroraddress" class="errorHolder"><ul class="parsley-errors-list filled" id="parsley-id-7879"><li class="parsley-required">Dies ist ein Pflichtfeld.</li></ul></div>
                <label class="c-label" for="address">
                    Straße, Nr.*
                </label>
                <input data-parsley-errors-container="#erroraddress" required="" data-parsley-trigger="focusout" data-parsley-group="block1" class="c-input" id="address" type="text" name="tx_registration_base[newFrontendUser][address]" data-parsley-id="7879">
            </div>
            <div class="c-float-container -has-input -light -is-active parsley-success">
                <div id="errorzip" class="errorHolder"><ul class="parsley-errors-list" id="parsley-id-5094"></ul></div>
                <label class="c-label" for="zip">
                    PLZ*
                </label>
                <input data-parsley-errors-container="#errorzip" required="" data-parsley-trigger="focusout" data-parsley-group="block1" class="c-input" id="zip" type="text" name="tx_registration_base[newFrontendUser][zip]" data-parsley-id="5094" data-com.agilebits.onepassword.user-edited="yes">
            </div>
            <div class="c-float-container -has-select -light -is-active parsley-error">
                <div id="errorstatus" class="errorHolder"><ul class="parsley-errors-list filled" id="parsley-id-9297"><li class="parsley-min">Bitte wählen Sie eine Option.</li></ul></div>
                <label class="c-label" for="status">
                    Status*
                </label>
                <select data-parsley-errors-container="#errorstatus" required="" data-parsley-min="1" data-parsley-group="block1" data-parsley-trigger="focusout" class="c-select js-select2" id="status" name="tx_registration_base[newFrontendUser][status]" data-parsley-id="9297"><option value="0"></option>
                    <option value="4">Apotheker</option>
                    <option value="8">Institution der Pharmazie</option>
                    <option value="3">Pharmazeut im Praktikum (PiP)</option>
                    <option value="7">Pharmazeutisches Personal</option>
                    <option value="1">Pharmaziestudent im Grundstudium</option>
                    <option value="2">Pharmaziestudent im Hauptstudium</option>
                    <option value="9">PTA</option>
                    <option value="6">Sonstiger Angehöriger eines Heilberufes</option>
                </select>
            </div>
            <div class="c-float-container -has-input -light">
                        <label class="c-label" for="capture">Captcha</label>
                        <input type="text" class="c-input" name="tx_veguestbook_pi1[captcha_response]" value="" id="capture">
                <img src="https://via.placeholder.com/130x30.png" alt="">
            </div>
        </div>
        <div class="c-form__bottom h-center h-width-90">
            <span class="c-btn -secondary -icon-left -icon-arrow" data-current-block="1" data-next-block="0">Vorheriger Schritt</span>
            <span class="c-btn -primary -icon-right -icon-arrow" data-current-block="1" data-next-block="2">Nächster Schritt</span>
        </div>
    </fieldset>
</div>

      # Settings and API

      The Form-Module handles the general functionality for inputs, textareas etc.
      For example: The "Floating Labels", the "Clear-Search-Button" and the "Data-Activate-Btn".

      const settings = {
        selector: {
            floatContainer:      ".c-float-container",
            floatElements:       ".c-input, .c-textarea, .c-select",
            searchInput:         ".js-search",
            searchClear:         ".js-search-clear",
            activateWithContent: "data-activate-btn",
            inlineBtn:           ".c-btn.-input",
            selectBox:           ".c-select"
        },
        class: {
            isActive:         "-is-active",
            isFocused:        "-is-focused",
            isSelect:         "-has-select",
            hasDatepicker:    "-has-datepicker",
            hasTooltip:       "js-tooltip",
            select2Container: "select2-container",
            select2Active:    "select2-container-active"
        },
        attribute: {
            isDisabled:         "disabled",
            minAmountOfLetters: "data-min-amount"
        }
    };
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24

      TIP

      Initializes the Form Module with or without custom settings and registers Event-Listeners:
      Form.init(settings: object);

      Activate Float:
      Form.activateFloat(element: Node);

      Deactivate Float:
      Form.deactivateFloat(element: Node);

      Activate disabled button:
      Form.activateInlineBtn(button: Node);

      ← Filter Dropdown →