README
Validation
Component type
- Component
Dependencies:
Name | Description |
---|---|
@citizensadvice/cads-support |
System-wide global variables and functions |
Installation
$ npm install @citizensadvice/cads-validation
@import "@citizensadvice/cads-validation/index.scss";
You can also make use of the unpkg service, try adding the link below to the head of your
HTML
file<link src="https://unpkg.com/@citizensadvice/cads-validation@latest/build/cads.validation.css" />
Implementation
Form validation helps us to ensure that users fill out forms in the correct format, making sure that submitted data will work successfully with our applications.
Input elements
For all inputs of type text
, password
, email
and number
.
<fieldset class="c-fieldset">
<label class="c-label" for="postcode">What's your postcode?</label>
<span class="c-label__metainfo">For example: SW1A 2AA</span>
<div class="c-input c-input--invalid">
<input id="postcode" type="text" name="postcode" pattern="[a-z]{1,15}" />
</div>
<span class="c-validation c-validation--invalid" for="postcode">Please enter a valid postcode</span>
</fieldset>
Radio / Checkboxes
<fieldset class="c-fieldset">
<legend class="c-label">Did this help?</legend>
<div class="c-fieldset__item">
<div class="c-radio c-radio--invalid">
<input checked id="yes" value="yes" name="feedback" type="radio">
<label for="yes">Yes</label>
</div>
</div>
<div class="c-fieldset__item">
<div class="c-radio c-radio--invalid">
<input id="no" value="no" name="feedback" type="radio">
<label for="no">No</label>
</div>
</div>
<div class="c-validation c-validation--invalid" for="postcode">Please select an option</div>
</fieldset>
<fieldset class="c-fieldset">
<legend class="c-fieldset__label">Right and/or left?</legend>
<div class="c-fieldset__item">
<div class="c-checkbox">
<input checked id="right" value="right" name="direction" type="checkbox" />
<label for="right">Right</label>
</div>
</div>
<div class="c-fieldset__item">
<div class="c-checkbox c-checkbox--invalid">
<input id="left" value="left" name="direction" type="checkbox" />
<label for="left">Left</label>
</div>
</div>
<div class="c-validation c-validation--invalid" for="postcode">Please select an option</div>
</fieldset>
Select menus (Dropdowns)
<fieldset class="c-fieldset">
<label class="c-label" for="select1">Example dropdown select</label>
<div class="c-select c-select--invalid">
<select id="select1">
<option value="Please select">Please select</option>
<option value="Option #1">Option #1</option>
<option value="Option #2">Option #2</option>
<option value="Option #3">Option #3</option>
<option value="Option #4">Option #4</option>
<option value="Option #5">Option #5</option>
</select>
</div>
<div class="c-validation c-validation--invalid" for="postcode">Please select one option</div>
</fieldset>
Textareas
<fieldset class="c-fieldset">
<label class="c-label" for="message">Message:</label>
<div class="c-textarea c-textarea--invalid">
<textarea id="message"></textarea>
</div>
<div class="c-validation c-validation--invalid" for="postcode">Please leave a message</div>
</fieldset>