Using the Validation Mixin

Get consistent validation states across all your forms the easy way.

By default Slate uses HTML5 validation on all forms, but you can also use class based validation. This is useful if you are using a backend system or something like Parsley to validate the form. It's easily configured to use the same classes used by those systems, whatever they may be.

Using HTML validation

It is enabled by default. However, you can re-enable it by setting the component to true in the form variable you are using to control your forms, like so:

$form-skin-default: (
  // Components
  components: (
    ...
    validation: true
  ),
  ...
  // Skins
  skins: (
    ...
    validation: $validation-default,
  ),
);

You need to also set the validation config up. Can you guess what use-classes: false does? False means HTML5 validation, true means you want to use classes and some other way of validating the input. You can also change the colors used for validation in the _config-validation.scss file. For example, the default skin looks like this:

$validation-default: (

  use-classes: false,

  color-required: $warning,
  color-valid: $positive,
  color-invalid: $negative,

  // You must put the valid/invalid/required classes
  // on labels for these to have an effect
  label-color-required: $warning,
  label-color-valid: $positive,
  label-color-invalid: $negative,

  border-required: 2px solid $warning,
  border-valid: 2px solid $positive,
  border-invalid: 2px solid $negative,

  focus-border-required: 2px solid darken($warning, 10%),
  focus-border-valid: 2px solid darken($positive, 10%),
  focus-border-invalid: 2px solid darken($negative, 10%),

);

Using class based validation

You can go head and apply classes to to inputs and labels using server side validation, Parsley, or indeed any method at all. If it generates classes on your elements to denote what state the input is in, you can use it. If you need to change the class names at all, this can be done in the _config-validation.scss:

$form-invalid-class: "invalid";
$form-valid-class: "valid";
$form-required-class: "required";

The following html will get you the result below:

<form class="validation-classes-form" novalidate>
<div class="form-three">
<div class="form-col">
<label class="required">Name</label> <input type="text"  class="required">
</div>
<div class="form-col">
<label class="invalid">Rank</label> <input type="text" class="invalid">
</div>
<div class="form-col">
<label class="valid">Age</label> <input type="number" min="4" max="8" class="valid">
</div>
</div>
</form>

Built with the Best

Slate was built by Hash&Salt, a company who loves building for the internet. Using the very best in industry leading software and practices honed over the last 20 years in the industry. You're in good hands.