Yii2 ActiveForm Ajax валидация и submit вне формы

235

14 декабря 2017, 00:28

Есть следующая конструкция:

$form = ActiveForm::begin([
    'id' => 'update-form',
    'enableAjaxValidation' => true,
]);
echo $form->field($model, 'name')->textInput();
ActiveForm::end();
<button type="submit" form="update-form">Сохранить</button>

С точки зрения HTML, элементы формы могут быть за ее пределами, но должны ссылаться на нее через аттрибут form. При нажатии на кнопку даже происходит отправка данных, но ajax валидация не запускается, а мне необходимо ее запустить. Если же submit будет находиться внутри формы, то валидация работает. Как правильно связать submit с формой, что бы работала ajax валидация?

Answer 1

С точки зрения html, вы правы, кнопка отправки формы может быть за пределом формы. Но с точки зрения механизма валидации, такое работать не будет, так как события привязываются на дочерний элемент формы submit, а он в данном случае не является дочерним.

Потому у вас два выхода.

Привязать к кнопке submit принудительный вызов валидации, по ссылке. В случае если валидация не проходит, запретить отправлять форму.
Поместить кнопку submit во внутрь формы и сделать размером в 1 пиксель (нельзя использовать display:none). А за пределами формы поставить простую кнопку, по нажатию на которую будет генерироваться клик по кнопке submit.

Answer 2

Ajax валидация с вынесенной наружу кнопкой работает, моя проблема заключалась лишь в том, что я не прописал в ActiveForm 'validateOnSubmit' => true

С ajax валидацией существует только одна проблема - это использование вынесенных наружу полей, но и она решается. Дело в том, что при вызове ActiveForm::end(), последний добавляет инициализацию в виде js скрипта в тело страницы. Если добавлять поле после end, то оно не будет добавлено в js скрипт. Решается так:

$form = ActiveForm::begin([
    'id' => 'update-form',
    'enableAjaxValidation' => true,
]);
ob_start();
echo $form->field($model, 'name')->textInput(['form' => 'update-form']);
$nameField = ob_get_clean();
ActiveForm::end();
echo $nameField;
?>
<button type="submit" form="update-form">Сохранить</button>