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
$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>