Валидация

Проверка на соответствие введенным данным

Email

Не правильно
Правильно
Правильно
<div class="sf-form sf-form-label">
    <input type="text" id="valid-mask-phone-1" data-inputmask="'alias': 'email'" class="sf-form-control" />
    <label for="valid-mask-phone-1" data-error="Формат Email mail@mail.ru" data-success="Все верно!">Введите email</label>
    <span class="inputvalid"></span>
</div>

Телефон

Неправильно
Правильно
Правильно
<div class="sf-form sf-form-label">
    <input type="tel" id="valid-mask-phone-1" data-inputmask="'mask': '+7 (999) 999-99-99'" class="sf-form-control" />
    <label for="valid-mask-phone-1" data-error="Введите телефон в формате +7 (123) 456-78-90" data-success="Все верно!">Введите телефон</label>
    <span class="inputvalid"></span>
</div>

Дата

Начальное состояние
Правильно
Неправильно
<div class="sf-form sf-form-label">
    <input type="text" id="valid-mask-date-1" name="validtext" class="sf-form-control" data-inputmask="'alias': 'date'" />
    <label for="valid-mask-date-1" data-error="Формат даты чило/месяц/год" data-success="Все верно!">Введите дату</label>
    <span class="inputvalid"></span>
</div>

Character counter

Use a character counter in fields where a character restriction is in place.

Input field

<div class="sf-form sf-form-label">
    <input id="input-char-counter" type="text" length="10" class="sf-form-control">
    <label for="input-char-counter">Input text</label>
</div>

Textarea 

<div class="sf-form sf-form-label">
    <textarea id="textarea-char-counter" class="sf-form-control" length="120" rows="3"></textarea>
    <label for="textarea-char-counter">Type your text</label>
</div>