Validation
Validation states of the interactive question grid used to help flag up lack of input.
Usage
To add an invalid state to these elements use slb-invalid onto the input tag of a form.
Add the class of 'slb-form__error-message' and input an appropriate validation message for the error message.
Accessible attributes
| Accessible attribute | Description |
|---|---|
aria-invalid="true" |
This attribute is used to indicate that the value entered into an input field does not conform to the format expected by the application. Set to true if value has failed validation otherwise set to false. |
JavaScript Support
| JavaScript Support class name | Description |
|---|---|
slb-invalid |
When the input is invalid the form element will change the colours to ux-red and adds in a flag icon. |
interactive-question\interactive-question-validation.hbs
<form>
<fieldset class="slb-question" id="question-grid-id" aria-label="Interactive question">
<div class="container mt-5">
<legend class="slb-question__text">How do you plan to answer this question?</legend>
<div class="row">
<div class="form-check col-sm-6">
<input type="radio" class="form-check-input slb-form__input slb-invalid" id="input-id-1" data-toggle="collapse" data-target="#answer-id-1" name="question-input-block" aria-expanded="false" aria-controls="answer-id-1">
<label class="slb-form__label slb-form__label--small ml-3">Input Label</label>
<label class="form-check-label form-check-label--question" for="input-id-1">Answer 1</label>
</div>
<div class="form-check col-sm-6">
<input type="radio" class="form-check-input slb-form__input slb-invalid" id="input-id-2" data-toggle="collapse" data-target="#answer-id-2" name="question-input-block" aria-expanded="false" aria-controls="answer-id-2">
<label class="form-check-label form-check-label--question" for="input-id-2">Answer 2</label>
</div>
<div class="form-check col-sm-6">
<input type="radio" class="form-check-input slb-form__input slb-invalid" id="input-id-3" data-toggle="collapse" data-target="#answer-id-3" name="question-input-block" aria-expanded="false" aria-controls="answer-id-3">
<label class="form-check-label form-check-label--question" for="input-id-3">Answer 3</label>
</div>
<div class="form-check col-sm-6">
<input type="radio" class="form-check-input slb-form__input slb-invalid" id="input-id-4" data-toggle="collapse" data-target="#answer-id-4" name="question-input-block" aria-expanded="false" aria-controls="answer-id-4">
<label class="form-check-label form-check-label--question" for="input-id-4">Answer 4</label>
</div>
<div class="form-check col-sm-6">
<input type="radio" class="form-check-input slb-form__input slb-invalid" id="input-id-5" data-toggle="collapse" data-target="#answer-id-5" name="question-input-block" aria-expanded="false" aria-controls="answer-id-5">
<label class="form-check-label form-check-label--question" for="input-id-5">Answer 5</label>
</div>
<div class="form-check col-sm-6">
<input type="radio" class="form-check-input slb-form__input slb-invalid" id="input-id-6" data-toggle="collapse" data-target="#answer-id-6" name="question-input-block" aria-expanded="false" aria-controls="answer-id-6">
<label class="form-check-label form-check-label--question" for="input-id-6">Answer 6</label>
</div>
<div class="col-12 col-md-6 col-lg-4 slb-invalid">
<p class="slb-form__error-message">Error message</p>
</div>
<button class="slb-question__reset">Change</button>
</div>
<div class="row mx-0">
<div id="answer-id-1" class="slb-question__answer col collapse" data-parent="#question-grid-id" aria-labelledby="input-id-1">
<div class="slb-question__answer-content">
<h6>Answer 1</h6>
<p>Ipsum dolor sit amet, consectetur uradic adipiscing elit. Maecenas id orci vel sapien molli porta ut non neque curabitur odio mauris.</p>
</div>
</div>
<div id="answer-id-2" class="slb-question__answer col collapse" data-parent="#question-grid-id" aria-labelledby="input-id-2">
<div class="slb-question__answer-content">
<h6>Answer 2</h6>
<p>Ipsum dolor sit amet, consectetur uradic adipiscing elit. Maecenas id orci vel sapien molli porta ut non neque curabitur odio mauris.</p>
</div>
</div>
<div id="answer-id-3" class="slb-question__answer col-12 collapse" data-parent="#question-grid-id" aria-labelledby="input-id-3">
<div class="slb-question__answer-content">
<h6>Answer 3</h6>
<p>Ipsum dolor sit amet, consectetur uradic adipiscing elit. Maecenas id orci vel sapien molli porta ut non neque curabitur odio mauris.</p>
</div>
</div>
<div id="answer-id-4" class="slb-question__answer col-12 collapse" data-parent="#question-grid-id" aria-labelledby="input-id-4">
<div class="slb-question__answer-content">
<h6>Answer 4</h6>
<p>Ipsum dolor sit amet, consectetur uradic adipiscing elit. Maecenas id orci vel sapien molli porta ut non neque curabitur odio mauris.</p>
</div>
</div>
<div id="answer-id-5" class="slb-question__answer col-12 collapse" data-parent="#question-grid-id" aria-labelledby="input-id-5">
<div class="slb-question__answer-content">
<h6>Answer 5</h6>
<p>Ipsum dolor sit amet, consectetur uradic adipiscing elit. Maecenas id orci vel sapien molli porta ut non neque curabitur odio mauris.</p>
</div>
</div>
<div id="answer-id-6" class="slb-question__answer col-12 collapse" data-parent="#question-grid-id" aria-labelledby="input-id-6">
<div class="slb-question__answer-content">
<h6>Answer 6</h6>
<p>Ipsum dolor sit amet, consectetur uradic adipiscing elit. Maecenas id orci vel sapien molli porta ut non neque curabitur odio mauris.</p>
</div>
</div>
</div>
</div>
</fieldset>
</form>
Source:
components/_interactive-question.scss