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
<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>Variations
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="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>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>Action with external link
<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>Multi-line title
<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>Sub-header
<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>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>Error: KeyMismatch - The private and the public sender key for the sender domain doesn’t match.
Content with action
<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>- 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
<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>API Reference
Properties
| Name | Description | Type | Required | Default value |
|---|---|---|---|---|
| header | Header of the validator. You can use * characters to highlight in text, example: lorem *highlighted* ipsum | string | ||
| subheader | Subheader of the validator | string | ||
| status | Status of the validator, can be success, danger or warning | string | ||
| action | Action of the validator, fires action event on click | string | ||
| action-href | Url to follow by clicking on the action | string | ||
| summary | Title for grouping multiple validators | string | ||
| summary-value | Value for the summary indiactor | string | ||
| summary-type | Type for the summary indicator: can be info, success, danger, warning | string |
Events
| Event | Description | Returns |
|---|---|---|
action | Fires on action click | |
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.