PatternLab Vite (1.8.12)

Appearance

Form ​

INFO

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".

Form Validation ​

HTML5 Form Control

  • add the class js-validate if you want an input, textarea or select field to be validated on every input or change event.
  • data-validation-error-message: Defines a custom validation error message.
  • 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.

Input Validation ​

.js-validate[required][data-validation-error-message="Mindestens 3 Zeichen eingeben"][minlength="3"]

Show Code
html
<div class="c-float-container -has-input">
  <label class="c-label" for="REPLACE_ID_00">Name *</label>
  <input type="text" class="c-input js-validate" required data-validation-error-message="Mindestens 3 Zeichen eingeben" minlength="3" name="" value="" id="REPLACE_ID_00" data-placeholder="type at least 3 characters ..." />
</div>

TIP

Add .-validate-warning class to the container if you want to show a warning message instead of an error message:

Show Code
html
<div class="c-float-container -validate-warning -has-input">
  <label class="c-label" for="input23-test">Name *</label>
  <input type="text" class="c-input js-validate" required data-validation-error-message="Mindestens 3 Zeichen eingeben" minlength="3" name="" value="" id="input23-test" data-placeholder="type at least 3 characters ..." />
</div>

Demo with Input-Group ​

.c-input-wrap > .c-input.-old.js-validate[pattern="^[^.]+$"][required]

Type at least 3 characters and only numbers are allowed.

WARNING

doesn't work anymore

Show Code
html
<div class="c-input-wrap">
  <select class="c-select -old js-select2 js-validate" name="opts" data-additional-classes="-old">
    <option value='1'>mg</option>
    <option value='2'>g</option>
    <option value='3'>I.E.</option>
  </select>
  <div class="c-input-wrap__input">
    <input class="c-input -old js-validate" pattern="^[^.]+$" required />
  </div>
</div>

Datepicker Demo with Pattern ​

.js-datepicker.js-validate[pattern="([0-1][0-9]|[1-2][0-9]|[1-3][0-1])\.([0][0-9]|[1][0-2])\.(\d\d\d\d)"]

Type a date in the format dd.mm.yyyy.

Show Code
html
<input type="text" class="c-input -old js-datepicker js-validate" 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)" />

Input Groups with Icons and Tooltips ​

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

Info
Warnung!
Eingabe korrekt
Show Code
html
    <div class="c-input-container">
        <input type="text" class="c-input -old -has-icon" name="" value=""  data-placeholder="Default Field" />
        <div class="c-input-container__icon">
            <a class="c-link js-tooltip" data-placement="left" data-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" aria-hidden="true"></i>
                <span class="h-sr-only">Info</span>
            </a>
        </div>
    </div>
    <div class="c-input-container m-y-m">
        <input type="text" class="c-input -old -error -has-icon" name="" value=""  data-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" aria-hidden="true"></i>
                <span class="h-sr-only">Warnung!</span>
            </a>
        </div>
    </div>
    <div class="c-input-container">
        <input type="text" class="c-input -old -success -has-icon" name="" value=""  data-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" aria-hidden="true"></i>
                <span class="h-sr-only">Eingabe korrekt</span>
            </a>
        </div>
    </div>

Example Form ​

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 SchrittNächster Schritt
      Show Code
      html
      <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 class="c-float-container -has-textarea -light">
          <label class="c-label" for="textarea1">Floating Label</label>
          <textarea class="c-textarea" name="" id="textarea1" cols="30" rows="10" data-placeholder=".. and Placeholder Text">
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
          </textarea>
        </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 ​

      Show Settings
      javascript
      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"
  }
};

      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);

      Copyright © 2024 - present Pharma4u