Валидация длины строки в Foundation
16 января 2014 Foundation 11093 просмотра
Frontend одного моего мини-проекта основан на Foundation фреймворке. Не хочу здесь заводить спор о том, почему не Twitter Bootstrap, а хочу рассказать про валидаторы в этом инструменте. А именно написание своего валидатора.

Демо

В Foundation довольно просто и понятно реализована проверка вводимых пользователем данных. Всё настраивается в HTML, практически всегда можно обойтись атрибутами. Это делается связкой HTML5 API + Foundation. Всего 16 стратегий заложено в ядро Foundation: alpha, alpha_numeric, integer, number, password, card, cvv, email, url, domain, datetime, date, time, dateISO, month_day_year, color.

Вот пример простейшей формы с одним полем для ввода URL сайта, она содержит в себе также текст ошибки.
<form data-abide>
    <fieldset>
        <legend>Введите URL</legend>

        <div class="row">
            <div class="large-12 columns">
                <label for="url">URL</label>
                <input type="text" id="url" placeholder="http://example.com" name="url" required>
                <small class="error">Корректный URL. Обязательно для заполнения</small>
            </div>
        </div>

        <div class="row">
            <div class="large-12 columns">
                <button type="submit">Сохранить</button>
            </div>
        </div>
    </fieldset>
</form>
Но бывает так, что стандартных стратегий недостаточно. Foundation предусмотрел это и можно написать свой валидатор на основе регулярных выражений. Следующим способом можно как создать новые стратегии, так и переписать стандартные.
$(document).foundation({
    abide: {
        patterns: {
            strlen: /^(.){2,50}$/
        }
    }
});
Один минус - нельзя задать параметры валидатора (минимальное и максимальное количества символов) в атрибутах. Поэтому для каждого уникального случая нужен свой шаблон.

И еще одна проблема, с которой я столкнулся. В документации была ошибка, поэтому пришлось потратить время на дебаг. Создал issue на GitHub, должны поправить.

И чтобы всё заработало, нужно добавить pattern=”strlen” в инпут.

Демо