0

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

$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 валидация?

2 ответа 2

0

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

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

  1. Привязать к кнопке submit принудительный вызов валидации, по ссылке. В случае если валидация не проходит, запретить отправлять форму.

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

6
  • А вот и нет, оказывается, моя конструкция работает, если прописать validateOnSubmit = true. Однако, поля, вынесенные за пределы формы не будут работать с ajax валидацией. По этому поводу я уже создал issue github.com/yiisoft/yii2/issues/15338
    – ilyaplot
    12 дек 2017 в 9:30
  • Кстати, если в submit кнопке прописать form = id формы, то события submit в ActiveForm срабатывают точно так же, потому что они связаны с событием отправки данных у самой формы.
    – ilyaplot
    12 дек 2017 в 9:33
  • Я выходил из ситуации вторым способом, что я описал. Считал, что так и должно быть потому не писал в issue
    – AlexMaxTM
    12 дек 2017 в 9:34
  • Так у вас вроде с самого начала была прописан id формы в кнопке form
    – AlexMaxTM
    12 дек 2017 в 9:36
  • Да, был прописан, у меня не был прописан параметр, который отвечает за валидацию по нажатию submit.
    – ilyaplot
    12 дек 2017 в 9:37
0

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.