Form validation
<form novalidate="" autocomplete="off" class="form">
<h2>Form validation title</h2>
<p>This is an example explanation for form validation.</p>
<div class="messageWrapper">
<div class="message is-alert message--withIcon">
<h1 class="message__headline">Validation</h1>
<div>
There are some problems with your input. Please correct them below.
</div>
</div>
</div>
<div class="form__formGroup has-error">
<div class="inputGroup inputGroup--mediumlarge is-invalid">
<label class="inputGroup__label is-required" for="input-name">
Name
</label>
<input class="inputGroup__textInput" type="text" placeholder="Name" id="input-name" />
<div class="inputGroup__description">
Enter at least 8 characters.
</div>
</div>
<div class="form__lineBreak">
<label class="inputGroup--error" for="input-name">
Please enter a valid name.
</label>
</div>
</div>
<div class="form__formGroup">
<div class="inputGroup inputGroup--mediumlarge">
<label class="inputGroup__label" for="input-secondname">
Second Name
</label>
<input class="inputGroup__textInput" type="text" placeholder="Name" id="input-secondname" />
<div class="inputGroup__description">
Enter at least 8 characters.
</div>
</div>
</div>
<fieldset>
<legend></legend>
<div class="form__formGroup has-error">
<div class="inputGroup inputGroup--xsmall is-invalid">
<label class="inputGroup__label is-required" for="input-zipcode">
ZIP code
</label>
<input class="inputGroup__textInput" type="text" placeholder="ZIP code" id="input-zipcode" />
<div class="inputGroup__description">
Enter digits.
</div>
</div>
<div class="inputGroup inputGroup--medium">
<label class="inputGroup__label is-required" for="input-city">
City
</label>
<input class="inputGroup__textInput" type="text" placeholder="City" id="input-city" value="Germany" />
<div class="inputGroup__description">
Enter at least one character.
</div>
</div>
<div class="inputGroup is-invalid">
<label class="inputGroup__label is-required" for="select-country">
Country
</label>
<div class="selectWrapper">
<select id="select-country" class="inputGroup__select">
<option value="">Please choose a country</option>
<option value="alb">Albania</option>
<option value="and">Andora</option>
<option value="aut">Austria</option>
<option value="bel">Belarus</option>
<option value="blg">Belgium</option>
</select>
</div>
<div class="inputGroup__description">
Select a country.
</div>
</div>
<div class="form__lineBreak">
<label class="inputGroup--error" for="input-zipcode">
Please enter a valid ZIP code.
</label>
<label class="inputGroup--error" for="select-country">
Please enter a valid country.
</label>
</div>
</div>
</fieldset>
<fieldset>
<legend></legend>
<div class="form__formGroup has-error">
<div class="inputGroup inputGroup--large is-invalid">
<label class="inputGroup__label is-required" for="input-feedback">
Feedback
</label>
<textarea class="inputGroup__textInput" spellcheck="false" id="input-feedback" placeholder="Feedback"></textarea>
<div class="inputGroup__description">
Enter at least one sentence.
</div>
</div>
<div class="form__lineBreak">
<label class="inputGroup--error" for="input-feedback">
Please enter a valid feedback.
</label>
</div>
</div>
<div class="form__formGroup has-error">
<div class="inputGroup inputGroup--medium is-invalid">
<label class="inputGroup__label is-required" for="input-female">
Gender
</label>
<div class="radioButtonWrapper">
<input type="radio" class="inputGroup__radioButton" id="input-female" name="input-gender" value="f" />
<label for="input-female">Female</label>
<label for="input-female" class="radioButton__description">Optional description text for female option.</label>
</div>
<div class="radioButtonWrapper">
<input type="radio" class="inputGroup__radioButton" id="input-male" name="input-gender" value="m" />
<label for="input-male">Male</label>
<label for="input-male" class="radioButton__description">Optional description.</label>
</div>
<div class="inputGroup__description">
Select one option.
</div>
</div>
<div class="inputGroup is-invalid">
<label class="inputGroup__label is-required" for="input-mindsphere">
Register account for
</label>
<div class="checkboxWrapper">
<input type="checkbox" class="inputGroup__checkbox" id="input-mindsphere" name="input-account" value="mindsphere" />
<label for="input-mindsphere">MindSphere</label>
<label for="input-mindsphere" class="checkbox__description">Get access to MindSphere.</label>
</div>
<div class="checkboxWrapper">
<input type="checkbox" class="inputGroup__checkbox" id="input-ds" name="input-account" value="ds" />
<label for="input-ds">DesignSystem</label>
<label for="input-ds" class="checkbox__description">Check for markup and styles.</label>
</div>
<div class="checkboxWrapper">
<input type="checkbox" class="inputGroup__checkbox" id="input-newsletter" name="input-account" value="newsletter" />
<label for="input-newsletter">Newsletter</label>
<label for="input-newsletter" class="checkbox__description">Know what's new.</label>
</div>
<div class="inputGroup__description">
Select at least one option.
</div>
</div>
<div class="form__lineBreak">
<label class="inputGroup--error" for="input-female">
Please choose a gender.
</label>
<label class="inputGroup--error" for="input-mindsphere">
Please choose at least one register option.
</label>
</div>
</div>
</fieldset>
<div class="form__requiredMsg">
* Required fields
</div>
<div class="form__buttons">
<input class="button--primary" disabled type="submit" value="Submit form" />
<button class="button--secondary">Cancel</button>
</div>
</form>
Usage
Element | Class | Description |
---|
.form__formGroup | .has-error | Marks the form group with a red indicator line on the left. |
.form__formGroup.has-error .inputGroup | .is-invalid | Marks the erroneous form element with a red text color and/or a red border. |
.inputGroup__label.is-required | | Marks the form element as a required field with a red asterisk after the label. |