Validation and required inputs

Validation types

There are three main options for when validation can happen.

onSubmit

When the user moves on to the next step or submits the form.

onBlur

When the user moves the focus out of an input.

onChange

When the user changes the content or value of an input.

We mainly use onSubmit because it is good enough for users and doesn’t take too long to code. In special cases, for example when the correct input requirements are higher, we can also use onBlur.

Writing validation messages

• Make the message relevant to the triggered error.
• Tell users how they can fix their mistake and move along.
• Avoid using technical words, it’s the user who must fix the error.
• Give users essential information up front, don’t use the error message as a place to start explaining the interface and service requirements.
• See the writing guidelines for more on how to write for Mybring users.

Anatomy

Default

Place error messages inside the label tag, below the label text. This is to make sure they also work on a screen reader and won’t be covered by dropdown menus, or autofill. The message should have the role attribute set to alert.

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

Input groups

When there are many small inputs side by side in a group, messages can be listed underneath the row or group of inputs for a tidier layout. This usually requires a more precise message for the user to connect it to the corresponding input. Every message should have the role attribute set to alert.

<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 should have the required attribute and 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" />