Очень простой способ добавить стили и проверку к вашим формам. Формы используются везде и, как правило, выглядят ужасно. Formly сделает формы на вашем сайте более привлекательными. Добавление стилей, проверки и более выразительное взаимодействие с пользователем осуществляется с помощью одной функции.

Как использовать

Для работы Formly требуется только jQuery. Поэтому включаем его и файл с исходными кодами Formly в раздел head вашей страницы.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/formly.js"></script>
<link rel="stylesheet" href="css/formly.css" type="text/css" />

Затем строим форму с помощью стандартных команд разметки HTML.

<form id="MyForm" width="400px">
Ваше имя: <input name="Name" type="text">
Адрес email: <input name="Email" validate="email" type="text">
Имя пользователя: <input name="Username" place="Без пробелов" require="true" type="text">
Пароль: <input name="Password" require="true" type="password">
<input value="Подписаться" type="submit"><input value="Очистить форму" type="reset">
</form>

Ваше имя:
Адрес email:
Имя пользователя:
Пароль:

А затем добавляем запуск Formly.

<script>
$(document).ready(function()
  { $('#MyForm').formly(); });
</script>

Ваше имя:
Адрес email:
Имя пользователя:
Пароль:

Теперь представим другой вараинт работы Formly.

<form id="BetaSignup" width="200px" title="Подписка" subtitle="для достпуа к закрытым материалам">
<input type="text" name="Name" place="Ваше имя" />
<input type="text" name="Email" validate="email" place="Адрес email" />
<input type="text" name="Username" place="Псевдоним" require="true" label="Имя пользователя" pre-fix="@" />
<input type="password" name="Password" require="true" label="Пароль" place="Без проблеов" />
<input type="password" name="PasswordMatch" match="Password" label="Пароль" place="Повторите пароль" />
<input type="submit" value="Подписаться" /><input type="reset" value="Очистить форму" />
</form>

<script>
$(document).ready(function()
  { $('#BetaSignup').formly({'onBlur':false, 'theme':'Light'}); });
</script>

Обратите внимание, что команда "validate" не нужна для полей с опцией "require". Так как проверка на правильность введенных данных проводится для таких полей автоматически. Также используется команда "match", в которой указывается имя элемента формы для сопоставления содержимого.

Теперь сделаем еще более сложную форму и посмотрим, как с ней справится Formly.

<form id="ContactInfo" width="600px" title="Member sign up">
<input type="text" name="first_name" place="Your first name" size="30" />
<input type="text" name="last_name" place="Your last name" size="30" style="margin-left:10px;" />
<input type="text" name="email" validate="email" place="Email address" size="30" />
<input type="text" name="website" place="Your website" size="30" pre-fix="http://" validate="http" style="margin-left:10px;" />
<select id="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<input type="radio" name="membership" value="new" style="margin-left:10px;" /> New member
<input type="radio" name="membership" value="existing" /> Existing member
<input type="password" name="pword" require="true" label="Password" place="Password" />
<input type="password" name="pwordm" match="pword" label="Password" place="Re-type password" />
<input type="checkbox" name="agree" require="true" label="Terms" value="agree" /> I agree to the terms
<input type="submit" value="Sign up" /><input type="reset" value="Clear" /> </form>

<script>
$(document).ready(function()
  {
  $('#ContactInfo').formly({'theme':'Dark'}, function(e)
      { $('.callback').html(e); });
  });
</script>

Мужчина Женщина Новый участник Действующий участник
Я согласен с условиями

В данном примере мы использовали возвратную функцию, которая выдает нам введенные данные в в формате URL. Данный метод исопльзуется только для примера, так как он является очень уязвимым при передаче информации.

Возвращаемое значение:

Команды для элементов формы

Formly сканирует элементы формы для обнаружения команд. Ниже приводится список всех команд, воспринимаемых плагином.

label : (string) используется для вывода метки
place : (string) заметситель текста
pre-fix : (string) префикс вводимого значения
require : (true или false) обязательный ввод значения
match : (string) имя поля ввода для сопоставления введенного значения
validate : ('email' или 'http') Проверка правильности ввода.