Документация / Зависимости /

Проверка заполненности

Этот вид зависимостей (ZForms.Dependence.TYPE_REQUIRED) проверяет заполненность виджета.

Параметры

oRequired : {
	Number iMin   : 1,
	String sLogic : 'and',
	Array aFrom   : []
	}

Где:

  • iMin — критерий заполненности. В зависимости от типа виджета будет влиять по-разному:

    • если тип виджета «Группа чекбоксов» — определяет число необходимых включенных чекбоксов. См. «Пример 5».
    • если тип виджета «Поле для ввода даты» — то проверяется заполненность всех его полей (независимо от параметра). См. «Пример 6».
    • если тип виджета «Контейнер виджетов» — определяет число заполненных дочерних виджетов. См. «Пример 3».
    • во всех остальных случаях — определяет минимальное число непробельных символов, которые необходимо ввести. См. «Пример 1».
  • sLogic — логика связывания зависимостей (играет роль только когда заполнен параметр aFrom). Например, когда нужно сделать так, чтобы можно было заполнить только одно из двух каких-то полей. См. «Пример 2».
  • aFrom — параметр, представляющий собой массив вида: [{ sName : 'имя_виджета_1', iMin : 1 }, …, { sName : 'имя_виджета_N', iMin : 1 }]. Параметр необходим, когда проверка заполненности виджета зависит не только от самого себя, но и от других виджетов. См. «Пример 2».

Пример 1. Простая проверка — необходимо ввести в поле не менее 5 символов.

 не менее 5 символов

Код примера 1

<form class="zf" action=".">
	<dl>
		<dt><label for="input-name">Имя</label></dt>
		<dd><input class="zf" type="text" name="name" id="input-name" onclick="return { oRequired : { iMin : 5 } }" /></dd>
		<dd class="zf-hint zf-hint-required"><i class="zf-arrow"></i>не&#160;менее 5&#160;символов</dd>
	</dl>
</form>

Пример 2. Необходимо заполнить одно из двух полей (любое на выбор). Вариант 1. Без объединяющего контейнера.

Код примера 2

<form class="zf" action=".">
	<dl>
		<dt><label for="input-header">Заголовок</label></dt>
		<dd><input class="zf" type="text" name="header" id="input-header" onclick="return { oRequired : { sLogic : 'or', aFrom : [{ sName : 'lead' }] } }" /></dd>
	</dl>
	<dl>
		<dt><label for="input-lead">Анонс</label></dt>
		<dd><input class="zf" type="text" name="lead" id="input-lead" onclick="return { oRequired : { sLogic : 'or', aFrom : [{ sName : 'header' }] } }" /></dd>
	</dl>
</form>

Пример 3. Необходимо заполнить одно из двух полей (любое на выбор). Вариант 2. С объединяющим контейнером.

Телефоны

Код примера 3

<form class="zf" action=".">
	<fieldset class="zf" onclick="return { oRequired : {} }">
		<legend><span>Телефоны</span></legend>
		<dl>
			<dt><label for="input-phone">Домашний</label></dt>
			<dd><input class="zf" type="text" name="phone" id="input-phone" /></dd>
		</dl>
		<dl>
			<dt><label for="input-phone-mobile">Мобильный</label></dt>
			<dd><input class="zf" type="text" name="phone-mobile" id="input-phone-mobile" /></dd>
		</dl>
	</fieldset>
</form>

Пример 4. Необходимо заполнить два из трех полей, причем поле «домашний» заполнить обязательно, а из остальных двух полей — любое на выбор.

Телефоны

Код примера 4

<form class="zf" action=".">
	<fieldset class="zf" onclick="return { oRequired : { iMin : 2 } }">
		<legend><span>Телефоны</span></legend>
		<dl>
			<dt><label for="input-phone-2">Домашний</label></dt>
			<dd><input class="zf" type="text" name="phone-2" id="input-phone-2" onclick="return { oRequired : {} }" /></dd>
		</dl>
		<dl>
			<dt><label for="input-phone-mobile-2">Мобильный</label></dt>
			<dd><input class="zf" type="text" name="phone-mobile-2" id="input-phone-mobile-2" /></dd>
		</dl>
		<dl>
			<dt><label for="input-phone-work-2">Рабочий</label></dt>
			<dd><input class="zf" type="text" name="phone-work-2" id="input-phone-work-2" /></dd>
		</dl>
	</fieldset>
</form>

Пример 5. Необходимо выбрать не менее двух опций из списка.

Код примера 5

<form class="zf" action=".">
	<dl class="zf zf-checkboxgroup" onclick="return { oRequired : { iMin : 2 } }">
		<dt><label>Источники доходов</label></dt>
		<dd>
			<div class="zf-option"><input class="zf" type="checkbox" name="options" value="1" id="input-options-1" /><label for="input-options-1">основная работа</label></div>
			<div class="zf-option"><input class="zf" type="checkbox" name="options" value="2" id="input-options-2" /><label for="input-options-2">работа по&#160;совместительству</label></div>
			<div class="zf-option"><input class="zf" type="checkbox" name="options" value="3" id="input-options-3" /><label for="input-options-3">подработка</label></div>
			<div class="zf-option"><input class="zf" type="checkbox" name="options" value="4" id="input-options-4" /><label for="input-options-4">собственный бизнес</label></div>
		</dd>
	</dl>
</form>

Пример 6. Заполнение поля типа «дата».

Код примера 6

<form class="zf">
	<dl class="zf-date-box">
		<dt><label for="input-date">Дата</label></dt>
		<dd><input class="zf zf-date" type="text" name="date" id="input-date" onclick="return { oRequired : {} }" /></dd>
	</dl>
</form>