Validation and required

Feedback and guidance

Validation

The default way of displaying validation messages is to have them inside the label, below the label text.

There are instances when other solutions work better. One example is when there are many small inputs side by side. Messages can be gathered underneath the row or group of inputs. This usually requires a more precise message for the user to connect it to the corresponding input.

<label class="form__label" for="content">
Content *<br />
<span class="form__label--error" role="alert">Content is required</span>
</label>
<input class="form__control form__control--error" id="content" />

<fieldset>
<legend>
  Size
</legend>
<div class="flex">
  <label class="form__label mrs">
    Height *
    <input class="form__control form__control--error" />
  </label>
  <label class="form__label mrs">
    Width
    <input class="form__control" />
  </label>
  <label class="form__label">
    Length *
    <input class="form__control form__control--error" />
  </label>
</div>
<ul>
  <li class="form__label--error" role="alert">Height is required</li>
  <li class="form__label--error" role="alert">Length is required</li>
</ul>
</fieldset>

Required and optional

Generally speaking, the mandatory inputs in Mybring can be marked with a asterisk in the same colour as the text. Optional inputs don’t need any special indication.

<label class="form__label" for="req">Required text input *</label>
<input type="text" class="form__control" id="req" required />

<label class="form__label" for="opt">Optional text input</label>
<input type="text" class="form__control" id="opt" />