Welcome
Design Principles
For Developers
For Designers
Extending
Writing Guidelines
Color
Icon
Text
General
Overview
Tabs
Form
Card
Editor
Iframe
Basic Grid
Flex Grid
Button
Button Group
Dropdown
Switch
Toggle
Dialog
Fieldset
Action List
Upgrade
Order
Field
Input Group
Inplaceeditor
Input Field
Radio Button
Checkbox
Emoji
Numberinput
Textarea
Upload
Select
Multiselect
Datetime
Slider
Criteria
Colorpicker
Toolbox
List
Datagrid
Table
Label
Legend
Charts
Ring
Compare
Notification
Progress
Spinner
Validator
Tooltip
Checklist
Tab
Vertical tab
Accordion
Helper Link
Navigation Bar
Pagination
Steps
Box
Separator
Card
Widget
Overlay
Device Display
Snack Bar
Empty State
Dashboard
Message Editing
Overview Table
Scheduling
Steps-guideline
CSS Utility Classes
Flipper Service
Config
Authentication Token
Translation
Tracking
Redesign
Numeric
Time
Iframe Loader
Release Notes

Validator

Validator is a block level component, you should use our grid to control the width of it.

Validators make it easy to have a quick overview of how the user’s setup is functioning. Each validator is connected to a process to indicate its operational status, like a ‘health check’.

Default

Copy Pug
Copy HTML
Open in playground
Show code
Hide code

<div class="e-row">
  <div class="e-col-6">
    <e-validator header="This is validator"></e-validator>
  </div>
</div>
<div class="e-row">
  <div class="e-col-6">
    <e-validator header="This is validator"></e-validator>
  </div>
</div>
JavaScript
Copy JavaScript

Variations

Status
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
[status="..."]

<div class="e-row">
  <div class="e-col-6">
    <e-validator header="Your check have *passed*" status="success"></e-validator>
  </div>
</div>
<div class="e-row">
  <div class="e-col-6">
    <e-validator header="You have a *warning*" status="warning"></e-validator>
  </div>
</div>
<div class="e-row">
  <div class="e-col-6">
    <e-validator header="Your check has an *error*" status="danger"></e-validator>
  </div>
</div>
<div class="e-row">
  <div class="e-col-6">
    <e-validator header="Your check had *info*" status="info"></e-validator>
  </div>
</div>
<div class="e-row">
  <div class="e-col-6">
    <e-validator header="Your check had *no result*"></e-validator>
  </div>
</div>
<div class="e-row">
  <div class="e-col-6">
    <e-validator header="Validation in progress..." status="loading"></e-validator>
  </div>
</div>
<div class="e-row">
  <div class="e-col-6">
    <e-validator header="Your check have *passed*" status="success"></e-validator>
  </div>
</div>
<div class="e-row">
  <div class="e-col-6">
    <e-validator header="You have a *warning*" status="warning"></e-validator>
  </div>
</div>
<div class="e-row">
  <div class="e-col-6">
    <e-validator header="Your check has an *error*" status="danger"></e-validator>
  </div>
</div>
<div class="e-row">
  <div class="e-col-6">
    <e-validator header="Your check had *info*" status="info"></e-validator>
  </div>
</div>
<div class="e-row">
  <div class="e-col-6">
    <e-validator header="Your check had *no result*"></e-validator>
  </div>
</div>
<div class="e-row">
  <div class="e-col-6">
    <e-validator header="Validation in progress..." status="loading"></e-validator>
  </div>
</div>
JavaScript
Copy JavaScript

Action
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
[action="..."]

<div class="e-row">
  <div class="e-col-6">
    <e-validator header="Your check have *passed*" status="success" action="Read more"></e-validator>
  </div>
</div>
<div class="e-row">
  <div class="e-col-6">
    <e-validator header="Your check have *passed*" status="success" action="Read more"></e-validator>
  </div>
</div>
JavaScript
Copy JavaScript

Action with external link
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
[action="..." action-href="..."]

<div class="e-row">
  <div class="e-col-6">
    <e-validator header="Your check have *passed*" status="success" action="Read more" action-href="https://emarsys.com"></e-validator>
  </div>
</div>
<div class="e-row">
  <div class="e-col-6">
    <e-validator header="Your check have *passed*" status="success" action="Read more" action-href="https://emarsys.com"></e-validator>
  </div>
</div>
JavaScript
Copy JavaScript

Multi-line title
Copy Pug
Copy HTML
Open in playground
Show code
Hide code

<div class="e-row">
  <div class="e-col-6">
    <e-validator header="This title is very long with some dummy text lorem ipsum dolor sit amet consectitur elit *success*" status="success"></e-validator>
  </div>
</div>
<div class="e-row">
  <div class="e-col-6">
    <e-validator header="This title is very long with some dummy text lorem ipsum dolor sit amet consectitur elit *success*" status="success"></e-validator>
  </div>
</div>
JavaScript
Copy JavaScript

Sub-header
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
[subheader="..."]

<div class="e-row">
  <div class="e-col-6">
    <e-validator header="Your DKIM check has *failed*" subheader="KeyMismatch - The private and the public sender key for the sender domain doesn’t match." status="danger"></e-validator>
  </div>
</div>
<div class="e-row">
  <div class="e-col-6">
    <e-validator header="Your DKIM check has *failed*" subheader="KeyMismatch - The private and the public sender key for the sender domain doesn’t match." status="danger"></e-validator>
  </div>
</div>
JavaScript
Copy JavaScript

Content
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
e-validator-content

<div class="e-row">
  <div class="e-col-6">
    <e-validator header="Your DKIM check has *failed*" status="danger">
      <e-validator-content>
        Sender domain: news.emarsys.com
        <br>
        Error: KeyMismatch - The private and the public sender key for the sender domain doesn’t match.
      </e-validator-content>
    </e-validator>
  </div>
</div>
<div class="e-row">
  <div class="e-col-6">
    <e-validator header="Your DKIM check has *failed*" status="danger">
      <e-validator-content>
        Sender domain: news.emarsys.com
        <br>
        Error: KeyMismatch - The private and the public sender key for the sender domain doesn’t match.
      </e-validator-content>
    </e-validator>
  </div>
</div>
JavaScript
Copy JavaScript
Sender domain: news.emarsys.com
Error: KeyMismatch - The private and the public sender key for the sender domain doesn’t match.

Content with action
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
e-validator-content

<div class="e-row">
  <div class="e-col-6">
    <e-validator header="Your DKIM check has *failed*" status="danger">
      <e-validator-content>
        <ul>
          <li>
            Sender domain: news.emarsys.com
          </li>
          <li>
            Error: KeyMismatch - The private and the public sender key for the sender domain doesn’t match.
          </li>
        </ul>
        <button class="e-btn e-btn-link">
          Why is this important?
        </button>
      </e-validator-content>
    </e-validator>
  </div>
</div>
<div class="e-row">
  <div class="e-col-6">
    <e-validator header="Your DKIM check has *failed*" status="danger">
      <e-validator-content>
        <ul>
          <li>
            Sender domain: news.emarsys.com
          </li>
          <li>
            Error: KeyMismatch - The private and the public sender key for the sender domain doesn’t match.
          </li>
        </ul>
        <div class="e-buttongroup e-buttongroup-flex">
          <button class="e-btn e-btn-small">
            Show DKIM record
          </button>
          <button class="e-btn e-btn-link">
            Why is this important?
          </button>
        </div>
      </e-validator-content>
    </e-validator>
  </div>
</div>
<div class="e-row">
  <div class="e-col-6">
    <e-validator header="Your DKIM check has *failed*" status="danger">
      <e-validator-content>
        <ul>
          <li>
            Sender domain: news.emarsys.com
          </li>
          <li>
            Error: KeyMismatch - The private and the public sender key for the sender domain doesn’t match.
          </li>
        </ul>
        <button class="e-btn e-btn-link">
          Why is this important?
        </button>
      </e-validator-content>
    </e-validator>
  </div>
</div>
<div class="e-row">
  <div class="e-col-6">
    <e-validator header="Your DKIM check has *failed*" status="danger">
      <e-validator-content>
        <ul>
          <li>
            Sender domain: news.emarsys.com
          </li>
          <li>
            Error: KeyMismatch - The private and the public sender key for the sender domain doesn’t match.
          </li>
        </ul>
        <div class="e-buttongroup e-buttongroup-flex">
          <button class="e-btn e-btn-small">
            Show DKIM record
          </button>
          <button class="e-btn e-btn-link">
            Why is this important?
          </button>
        </div>
      </e-validator-content>
    </e-validator>
  </div>
</div>
JavaScript
Copy JavaScript
  • Sender domain: news.emarsys.com
  • Error: KeyMismatch - The private and the public sender key for the sender domain doesn’t match.
  • Sender domain: news.emarsys.com
  • Error: KeyMismatch - The private and the public sender key for the sender domain doesn’t match.

Summary
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
[summary="..."]

<div class="e-row">
  <div class="e-col-6">
    <div class="e-field">
      <e-validator summary="Optional caption" summary-value="3" summary-type="danger"></e-validator>
      <e-validator header="Your check have *passed*" status="success"></e-validator>
      <e-validator header="Your test resulted 2 *errors*" status="danger"></e-validator>
      <e-validator header="Your other test has an *error*" status="danger"></e-validator>
    </div>
  </div>
</div>
<div class="e-row">
  <div class="e-col-6">
    <div class="e-field">
      <e-validator summary="Optional caption" summary-value="1,3" summary-type="success,danger"></e-validator>
      <e-validator header="Your check have *passed*" status="success"></e-validator>
      <e-validator header="Your test resulted 2 *errors*" status="danger"></e-validator>
      <e-validator header="Your other test has an *error*" status="danger"></e-validator>
    </div>
  </div>
</div>
<div class="e-row">
  <div class="e-col-6">
    <e-validator summary="Optional caption" summary-value="3" summary-type="danger"></e-validator>
    <e-validator header="Your check have *passed*" status="success">
      <e-validator-content>
        Sender domain: news.emarsys.com
      </e-validator-content>
    </e-validator>
    <e-validator header="Your test resulted 2 *errors*" status="danger">
      <e-validator-content>
        Sender domain: news.emarsys.com
      </e-validator-content>
    </e-validator>
    <e-validator header="Your other test has an *error*" status="danger">
      <e-validator-content>
        Sender domain: news.emarsys.com
      </e-validator-content>
    </e-validator>
    <div class="e-boxpadding text-align-right">
      <button class="e-btn">
        Show details
      </button>
    </div>
  </div>
</div>
<div class="e-row">
  <div class="e-col-6">
    <div class="e-field">
      <e-validator summary="Optional caption" summary-value="3" summary-type="danger"></e-validator>
      <e-validator header="Your check have *passed*" status="success"></e-validator>
      <e-validator header="Your test resulted 2 *errors*" status="danger"></e-validator>
      <e-validator header="Your other test has an *error*" status="danger"></e-validator>
    </div>
  </div>
</div>
<div class="e-row">
  <div class="e-col-6">
    <div class="e-field">
      <e-validator summary="Optional caption" summary-value="1,3" summary-type="success,danger"></e-validator>
      <e-validator header="Your check have *passed*" status="success"></e-validator>
      <e-validator header="Your test resulted 2 *errors*" status="danger"></e-validator>
      <e-validator header="Your other test has an *error*" status="danger"></e-validator>
    </div>
  </div>
</div>
<div class="e-row">
  <div class="e-col-6">
    <e-validator summary="Optional caption" summary-value="3" summary-type="danger"></e-validator>
    <e-validator header="Your check have *passed*" status="success">
      <e-validator-content>
        Sender domain: news.emarsys.com
      </e-validator-content>
    </e-validator>
    <e-validator header="Your test resulted 2 *errors*" status="danger">
      <e-validator-content>
        Sender domain: news.emarsys.com
      </e-validator-content>
    </e-validator>
    <e-validator header="Your other test has an *error*" status="danger">
      <e-validator-content>
        Sender domain: news.emarsys.com
      </e-validator-content>
    </e-validator>
    <div class="e-boxpadding text-align-right">
      <button class="e-btn">
        Show details
      </button>
    </div>
  </div>
</div>
JavaScript
Copy JavaScript
Sender domain: news.emarsys.comSender domain: news.emarsys.comSender domain: news.emarsys.com

API Reference

Properties

NameDescriptionTypeRequiredDefault value
headerHeader of the validator. You can use * characters to highlight in text, example: lorem *highlighted* ipsumhtml
subheaderSubheader of the validatorstring
statusStatus of the validator, can be success, danger, warning or loadingstring
actionAction of the validator, fires action event on clickstring
action-hrefUrl to follow by clicking on the actionstring
summaryTitle for grouping multiple validatorsstring
summary-valueValue for the summary indiactorstring
summary-typeType for the summary indicator: can be info, success, danger, warningstring
openedSets the opened state of the componentbooleanfalse

Events

EventDescriptionReturns
actionFires on action click
triggerFires on open/close{ detail: { opened: [true/false], } }

Validator

Validator is a block level component, you should use our grid to control the width of it.

Validators make it easy to have a quick overview of how the user’s setup is functioning. Each validator is connected to a process to indicate its operational status, like a ‘health check’.

Structure

It can be extended to provide insights about the returned results, and to give a trace or solution if an error occurs.

Best practices

Validator should:

  • Have a short sentence as the title to summarize how the check resulted.
  • Highlight the result in the title
  • Use an icon and a color aligned to its meaning. Choose one of the following: positive (success/passed/working/healthy), warning (suspicious/warning), danger (error/failed).
  • Have a description of maximum 8 sentences. Provide a link to external documentation if further explanation is needed.

Try to avoid:

  • Using Validator for short feedback messages, such as a change in the system. Consider using a Notice or Alert instead. Validators are preferably more detailed, constant elements, which change their statuses in-line.