Form validation

Form validation helps to ensure that users fill out forms in the correct format and that the submitted data will work successfully. Erroneous form elements are marked.

Form validation

Form validation title

This is an example explanation for form validation.

Validation

There are some problems with your input. Please correct them below.
Enter at least 8 characters.
Enter at least 8 characters.
Enter digits.
Enter at least one character.
Select a country.
Enter at least one sentence.
Select one option.
Select at least one option.
* Required fields
<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

ElementClassDescription
.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.
Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top