Validation patterns

  1. Pages
  2. Forms
  3. Validation

Request workspace access

Required fields are checked when the form is submitted.

Enter your full name to continue.
Enter a valid work email address.
Choose the department you work with.
Choose the access level you need.
Add at least 12 characters so the owner has enough context.
Please add a short reason for your request.
Confirm the access review policy before submitting.
Your request is shared with workspace admins. 
<form class="needs-validation" novalidate>
  <input class="form-control" type="email" required>
  <div class="invalid-feedback">Enter a valid email.</div>
  <button type="submit">Submit request</button>
</form>

Field states

Show users what needs attention.

Verified
Email address is ready to use.
Needs attention
Enter a complete email address.

Browser validation

Let the browser check required fields and formats.

Try submitting with an empty or invalid field. 
<input type="email" class="form-control" required>
<input type="url" class="form-control" required>

Contextual feedback

Place validation messages beside the relevant controls.

Add a name for this project.
Enter a valid owner email.
Submit to preview the tooltip states. 
<div class="position-relative">
  <input class="form-control" required>
  <div class="invalid-tooltip">Add a project name.</div>
</div>