Форма

ZForms.Widget → ZForms.Widget.Container → ZForms.Widget.Container.Form

Является корневым виджетом для всей формы, к которому уже добавляются все остальные виджеты. Создается на основе HTML-элемента <form />.

Определение виджета

Виджет определяется по тэгу form — <form class="zf" />.

Параметры инициализации

oOptions : {
	Boolean bUpdatableSubmit : true,
	Boolean bCheckForValid   : true,
	Boolean bCheckForChanged : false,
	Boolean bPreventSubmit   : false
	}

Где:

bUpdatableSubmit — параметр, определяющий, нужно ли отключать кнопку отправки формы, если какие-то необходимые данные в форме не заполнены или неправильно заполнены (это условие зависит от параметра bCheckForValid). Если значение параметра равно true — то кнопка отправки формы выключается, если false — то кнопка отправки формы всегда доступна, но в случае неправильных данных при ее нажатии фокус переходит на первое неправильно заполненное поле.
bCheckForValid — параметр, определяющий, можно ли отправлять форму, если в форме есть неправильно заполненные данные. Если значение параметра равно true — форма не будет отправлена.
bCheckForChanged — параметр, указывающий, что форма должна следить за своими изменениями, и если данные в ней не изменились, то кнопка отправки формы будет недоступна (только при bUpdatableSubmit = true).
bPreventSubmit — параметр, определяющий, должна ли форма отправляться на сервер. При значение, установленном в true, форма не будет отправлена на сервер (может применяться для создания AJAX-приложений).

Пример 1. Форма проверяет как незаполненность нужных полей так и их валидность. Кнопка отправки формы отключаемая.

Код примера 1

<form class="zf" action=".">
	<dl>
		<dt><label for="input-first-name-1">Имя</label></dt>
		<dd><input class="zf" type="text" name="first-name-1" id="input-first-name-1" onclick="return { oRequired : { iMin : 3 } }" /></dd>
	</dl>
	<dl>
		<dt><label for="input-email-1">Эл. адрес</label></dt>
		<dd><input class="zf" type="text" name="email-1" id="input-email-1" onclick="return { oValid : { sType : 'email' } }" /></dd>
	</dl>
	<div class="zf-buttons"><input class="zf" type="submit" value="Отправить" /></div>
</form>

Пример 2. Форма проверяет только незаполненность нужных полей, валидность данных не учитывается. Кнопка отправки формы отключаемая.

Код примера 2

<form class="zf" action="." onclick="return { oOptions : { bCheckForValid : false } }">
	<dl>
		<dt><label for="input-first-name-2">Имя</label></dt>
		<dd><input class="zf" type="text" name="first-name-2" id="input-first-name-2" onclick="return { oRequired : { iMin: 3 } }" /></dd>
	</dl>
	<dl>
		<dt><label for="input-email-2">Эл. адрес</label></dt>
		<dd><input class="zf" type="text" name="email-2" id="input-email-2" onclick="return { oValid : { sType : 'email' } }" /></dd>
	</dl>
	<div class="zf-buttons"><input class="zf" type="submit" value="Отправить" /></div>
</form>

Пример 3. Форма проверяет как незаполненность нужных полей, так и их валидность, а также отключает кнопку отправки формы если данные в форме не изменились.

<form class="zf" action="." onclick="return { oOptions : { bCheckForChanged : true } }">
	<dl>
		<dt><label for="input-first-name-3">Имя</label></dt>
		<dd><input class="zf" type="text" name="first-name-3" id="input-first-name-3" value="Дмитрий" onclick="return { oRequired : { iMin : 3 } }" /></dd>
	</dl>
	<dl>
		<dt><label for="input-email-3">Эл. адрес</label></dt>
		<dd><input class="zf" type="text" name="email-3" id="input-email-3" onclick="return { oValid : { sType : 'email' } }" /></dd>
	</dl>
	<div class="zf-buttons"><input class="zf" type="submit" value="Отправить" /></div>
</form>

Пример 4. Форма проверяет как незаполненность нужных полей, так и их валидность. Кнопка отправки не отключаемая. При попытке отправки формы с неправильными данными фокус переходит на первое поле с неправильными данными и высвечиваются сообщения.

Код примера 4

<form class="zf" action="." onclick="return { oOptions : { bUpdatableSubmit : false } }">
	<dl>
		<dt><label for="input-first-name-4">Имя</label></dt>
		<dd><input class="zf" type="text" name="first-name-4" id="input-first-name-4" onclick="return { oRequired : { iMin : 3 } }" /></dd>
		<dd class="zf-error">Заполните поле</dd>
	</dl>
	<dl>
		<dt><label for="input-email-4">Эл. адрес</label></dt>
		<dd><input class="zf" type="text" name="email-4" id="input-email-4" value="test@" onclick="return { oValid : { sType : 'email' } }" /></dd>
		<dd class="zf-error">Неверно заполнено</dd>
	</dl>
	<div class="zf-buttons"><input class="zf" type="submit" value="Отправить" /></div>
</form>

Последний релиз