Form
.c-form
TIP
The Form-Module handles the general form styles and styles for additional elements like CAPTCHA images or Powermail / Parsley error messages.
.
It also handles the general functionality for inputs, textareas etc.
For example: The "Floating Labels", the "Clear-Search-Button" and the "Data-Activate-Btn".
- Combinations of Input Fields, Selects, Buttons, Checkboxes or Radio Buttons.
- Related: Search Fields
Form Validation
TIP
HTML5 Form Control:
- add the class
js-validateif 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.minlengthandmaxlength: Specifies the minimum and maximum length of textual data (strings).minandmax: 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.requiredattribute is also needed, otherwise an input field with an empty value will be excluded from constraint validation.
Input Validation
TODO: move to extra folder "Input Validation"?
.js-validate[required][data-validation-error-message="Mindestens 3 Zeichen eingeben"][minlength="3"]
Type at least 3 characters into the following field:
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.
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>Date Input Demo with Pattern
.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-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)" />TIP
Inputs are validated after input or change event triggers, see Input.js
Example Forms
Example integrations used on the pharma4u website.
Parsley Form
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>
</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://placehold.co/130x50" 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>Powermail Form
.c-float-container > .error-msg
Show Code
html
<div class="subscribe-newsletter">
<div class="c-float-container -has-input">
<label class="c-label" for="fe_ttaddress_name_input">Name*</label>
<span class="error-msg">Dies ist ein Pflichtfeld!</span>
<input type="text" class="c-input" name="FE[tt_address][name]" id="fe_ttaddress_name_input">
</div>
<div class="c-float-container -has-input">
<label class="c-label" for="fe_ttaddress_email_input">E-Mail*</label>
<span class="error-msg">Dies ist ein Pflichtfeld! Dies ist keine gültige E-Mail-Adresse!</span>
<input type="text" class="c-input" name="FE[tt_address][email]" id="fe_ttaddress_email_input">
</div>
<div class="c-form__bottom">
<button class="c-btn -primary" type="submit" name="whatever">Newsletter abonnieren</button>
</div>
</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);