# Validation

Source: https://iriscss.com/documentation/form/validation/

Native validation works with no script. `aria-invalid` shows the result of your own checks.

## Native validation

Controls that break their `required`, `type`, `pattern` or length rules turn red with an icon. Iris uses `:user-invalid`, so a field only turns red after the user has changed it or tried to submit. Type a few letters below, then clear the field.

```html
<form>
  <label>Email <input type="email" name="email" required placeholder="ada@example.com"></label>
  <small>We never share your email.</small>
  <button type="submit">Subscribe</button>
</form>
```

## Server side checks

For checks the browser cannot make, set `aria-invalid` yourself. `"true"` marks an error and `"false"` a field that passed. Screen readers announce the error too.

```html
<label for="valid-name">Username</label>
<input type="text" id="valid-name" value="ada" aria-invalid="false" aria-describedby="valid-name-help">
<small id="valid-name-help">Available.</small>
<label for="invalid-name">Username</label>
<input type="text" id="invalid-name" value="admin" aria-invalid="true" aria-describedby="invalid-name-help">
<small id="invalid-name-help">This name is taken.</small>
```

## Helper text

A `small` right after the control follows its state: green when it is valid and red when it is not. It works after a `fieldset` or a `.grid` too.

## Selects, textareas and checkboxes

```html
<select aria-invalid="true" aria-label="Country"><option>Choose a country</option></select>
<textarea aria-invalid="true" aria-label="Message">Too short</textarea>
<label><input type="checkbox" aria-invalid="true"> I accept the terms</label>
<label><input type="checkbox" role="switch" aria-invalid="false" checked> Newsletter</label>
```

## Variables

The valid and invalid colors are the `--i-input-valid-` and `--i-input-invalid-` variables on the [controls](https://iriscss.com/documentation/form/controls/index.html.md#variables) page. The icons are `--i-svg-valid` and `--i-svg-invalid`. Their colors are baked into the SVG, since inputs cannot draw a masked icon, so replace them when you change `--i-color-success` or `--i-color-danger`.