octicon-rss(16/)
You've already forked yii2
mirror of
https://github.com/yiisoft/yii2.git
synced 2025-11-10 02:13:17 +08:00
Translated Input form JavaScript docs into Russian (#17242) [skip ci]
This commit is contained in:
octicon-git-branch(16/)
octicon-tag(16/)
committed by
Alexander Makarov
gitea-unlock(16/)
parent
8d2b3b5a94
commit
41592004b7
octicon-diff(16/tw-mr-1) 2 changed files with 190 additions and 0 deletions
@@ -92,6 +92,7 @@ All Rights Reserved.
|
|||||||
* [Загрузка файлов](input-file-upload.md)
|
* [Загрузка файлов](input-file-upload.md)
|
||||||
* [Табличный ввод](input-tabular-input.md)
|
* [Табличный ввод](input-tabular-input.md)
|
||||||
* [Работа с несколькими моделями](input-multiple-models.md)
|
* [Работа с несколькими моделями](input-multiple-models.md)
|
||||||
|
* [Расширение ActiveForm на стороне клиента](input-form-javascript.md)
|
||||||
|
|
||||||
|
|
||||||
Отображение данных
|
Отображение данных
|
||||||
|
|||||||
189
docs/guide-ru/input-form-javascript.md
Normal file
189
docs/guide-ru/input-form-javascript.md
Normal file
@@ -0,0 +1,189 @@
|
|||||||
|
Расширение ActiveForm на стороне клиента
|
||||||
|
=======================================
|
||||||
|
|
||||||
|
Виджет [[yii\widgets\ActiveForm]] поставляется с набором JavaScript методов, которые используются для проверки на стороне клиента.
|
||||||
|
Его реализация очень гибкая и позволяет расширять его различными способами.
|
||||||
|
|
||||||
|
## ActiveForm события
|
||||||
|
|
||||||
|
ActiveForm запускает серию специальных событий. Используя код, подобный следующему, вы можете подписаться на эти события и обрабатывать их:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
$('#contact-form').on('beforeSubmit', function (e) {
|
||||||
|
if (!confirm("Everything is correct. Submit?")) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
Ниже мы рассмотрим доступные события.
|
||||||
|
|
||||||
|
### `beforeValidate`
|
||||||
|
|
||||||
|
`beforeValidate` запускается перед проверкой всей формы.
|
||||||
|
|
||||||
|
Сигнатура обработчика событий должна быть:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function (event, messages, deferreds) {}
|
||||||
|
```
|
||||||
|
|
||||||
|
где
|
||||||
|
|
||||||
|
- `event`: объект `Event`
|
||||||
|
- `messages`: ассоциативный массив с ключами, являющимися идентификаторами атрибутов, и значениями, являющимися массивами сообщений об ошибках для соответствующих атрибутов
|
||||||
|
- `deferreds`: массив отложенных объектов. Вы можете использовать `deferreds.add(callback)`, чтобы добавить новую отложенную проверку
|
||||||
|
|
||||||
|
Если обработчик возвращает логическое `false`, он остановит дальнейшую проверку формы после этого события. И, как результат, событие `afterValidate` не будет запущено.
|
||||||
|
|
||||||
|
### `afterValidate`
|
||||||
|
|
||||||
|
`afterValidate` событие запускается после проверки всей формы.
|
||||||
|
|
||||||
|
Сигнатура обработчика события должна быть:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function (event, messages, errorAttributes) {}
|
||||||
|
```
|
||||||
|
|
||||||
|
где
|
||||||
|
|
||||||
|
- `event`: объект `Event`
|
||||||
|
- `messages`: ассоциативный массив с ключами, являющимися идентификаторами атрибутов, и значениями, являющимися массивами сообщений об ошибках для соответствующих атрибутов
|
||||||
|
- `errorAttributes`: массив атрибутов, которые имеют ошибки проверки. Пожалуйста, обратитесь к `attributeDefaults` для просмотра структуры этого параметра
|
||||||
|
|
||||||
|
### `beforeValidateAttribute`
|
||||||
|
|
||||||
|
`beforeValidateAttribute` событие инициируется перед проверкой атрибута.
|
||||||
|
|
||||||
|
Сигнатура обработчика события должна быть:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function (event, attribute, messages, deferreds)
|
||||||
|
```
|
||||||
|
|
||||||
|
где
|
||||||
|
|
||||||
|
- `event`: объект `Event`
|
||||||
|
- `attribute`: атрибут для проверки. Пожалуйста, обратитесь к `attributeDefaults` для просмотра структуры этого параметра
|
||||||
|
- `messages`: массив, в который вы можете добавить сообщения об ошибках проверки для указанного атрибута
|
||||||
|
- `deferreds`: массив отложенных объектов. Вы можете использовать `deferreds.add (callback)`, чтобы добавить новую отложенную проверку
|
||||||
|
|
||||||
|
Если обработчик возвращает логическое `false`, он остановит дальнейшую проверку указанного атрибута.
|
||||||
|
И, как результат, событие `afterValidateAttribute` не будет запущено.
|
||||||
|
|
||||||
|
### `afterValidateAttribute`
|
||||||
|
|
||||||
|
`afterValidateAttribute` событие запускается после проверки всей формы и каждого атрибута.
|
||||||
|
|
||||||
|
Сигнатура обработчика события должна быть:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function (event, attribute, messages)
|
||||||
|
```
|
||||||
|
|
||||||
|
где
|
||||||
|
|
||||||
|
- `event`: объект `Event`
|
||||||
|
- `attribute`: проверяемый атрибут. Пожалуйста, обратитесь к `attributeDefaults` для просмотра структуры этого параметра
|
||||||
|
- `messages`: массив, в который вы можете добавить дополнительные сообщения об ошибках валидации для указанного атрибута
|
||||||
|
|
||||||
|
### `beforeSubmit`
|
||||||
|
|
||||||
|
`beforeSubmit` событие запускается перед отправкой формы после того, как все проверки пройдены.
|
||||||
|
|
||||||
|
Сигнатура обработчика события должна быть:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function (event)
|
||||||
|
```
|
||||||
|
|
||||||
|
где событие является объектом `Event`.
|
||||||
|
|
||||||
|
Если обработчик возвращает логическое значение `false`, он остановит отправку формы.
|
||||||
|
|
||||||
|
### `ajaxBeforeSend`
|
||||||
|
|
||||||
|
`ajaxBeforeSend` cобытие инициируется перед отправкой AJAX запроса для проверки основанной на AJAX.
|
||||||
|
|
||||||
|
Сигнатура обработчика события должна быть:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function (event, jqXHR, settings)
|
||||||
|
```
|
||||||
|
|
||||||
|
где
|
||||||
|
|
||||||
|
- `event`: объект `Event`
|
||||||
|
- `jqXHR`: объект `jqXHR`
|
||||||
|
- `settings`: настройки для AJAX запроса
|
||||||
|
|
||||||
|
### `ajaxComplete`
|
||||||
|
|
||||||
|
`ajaxComplete` событие запускается после выполнения AJAX запроса для проверки основанной на AJAX.
|
||||||
|
|
||||||
|
Сигнатура обработчика события должна быть:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function (event, jqXHR, textStatus)
|
||||||
|
```
|
||||||
|
|
||||||
|
где
|
||||||
|
|
||||||
|
- `event`: объект `Event`
|
||||||
|
- `jqXHR`: объект `jqXHR`
|
||||||
|
- `textStatus`: статус запроса ("success", "notmodified", "error", "timeout", "abort", или "parsererror")
|
||||||
|
|
||||||
|
## Отправка формы через AJAX
|
||||||
|
|
||||||
|
Хотя проверка может быть выполнена на стороне клиента или с помощью AJAX-запроса, сама отправка формы, по умолчанию, выполняется как обычный запрос.
|
||||||
|
Если вы хотите, чтобы форма была отправлена через AJAX, вы можете достичь этого, обработав событие `beforeSubmit` формы следующим образом:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
var $form = $('#formId');
|
||||||
|
$form.on('beforeSubmit', function() {
|
||||||
|
var data = $form.serialize();
|
||||||
|
$.ajax({
|
||||||
|
url: $form.attr('action'),
|
||||||
|
type: 'POST',
|
||||||
|
data: data,
|
||||||
|
success: function (data) {
|
||||||
|
// Implement successful
|
||||||
|
},
|
||||||
|
error: function(jqXHR, errMsg) {
|
||||||
|
alert(errMsg);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return false; // prevent default submit
|
||||||
|
});
|
||||||
|
```
|
||||||
|
Чтобы узнать больше о jQuery функции `ajax()`, обратитесь к документации [jQuery documentation](https://api.jquery.com/jQuery.ajax/).
|
||||||
|
|
||||||
|
|
||||||
|
## Добавления полей динамически
|
||||||
|
|
||||||
|
В современных веб-приложениях часто возникает необходимость изменения формы после ее отображения пользователю.
|
||||||
|
Это может быть, например, добавление новых полей после нажатия на значок "плюс".
|
||||||
|
Чтобы включить проверку, на стороне клиента, для этих полей, они должны быть зарегистрированы с помощью JavaScript плагина Active Form.
|
||||||
|
|
||||||
|
Вы должны добавить само поле, а затем добавить его в список проверки:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
$('#contact-form').yiiActiveForm('add', {
|
||||||
|
id: 'address',
|
||||||
|
name: 'address',
|
||||||
|
container: '.field-address',
|
||||||
|
input: '#address',
|
||||||
|
error: '.help-block',
|
||||||
|
validate: function (attribute, value, messages, deferred, $form) {
|
||||||
|
yii.validation.required(value, messages, {message: "Validation Message Here"});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
Для удаления поля из списка проверки, чтобы оно не было проверено, выполните следующие действия:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
$('#contact-form').yiiActiveForm('remove', 'address');
|
||||||
|
```
|
||||||
Reference in New Issue
Block a user