Почему не работает валидация при отправке формы в Yii2 через ajax?

Question

[Crash]

Ситуация такая. Создал форму через ActiveRecord, она отправляется через ajax (есть обработчик на JQuery). Проблема в том, что там есть обязательные поля, без которых форма не должна отправляться. Но с ajax-обработчиком она отправляется в любом случае, а без него все работает как положено.

Код формы:

<?php $form = ActiveForm::begin([
                        'id' => 'write-review-form',
                        'action' => '/admin/send-mails/send-review',
                    ]) ?>

                    <?= $form->field($review, 'firstname')->textInput(['placeholder' => 'Имя'])->label('') ?>
                    <?= $form->field($review, 'lastname')->textInput(['placeholder' => 'Фамилия (по желанию)'])->label('') ?>

                    <?php
                        $year = 1998;
                        $endYear = (int)date('Y');
                        $yearItems = [];

                        while ( $year <= $endYear ) {
                            $yearItems[$year] = $year;
                            $year += 1;
                        }
                    ?>

                    <?= $form->field($review, 'since_year')->dropDownList($yearItems)->label('С какого года пользуетесь нашими услугами?') ?>
                    <?= $form->field($review, 'review')->textarea(['rows' => 5, 'placeholder' => 'Ваш отзыв'])->label('') ?>

                    <?= $form->field($review, 'verifyCode')->widget(Captcha::className(), [
                        'template' => '<div class="row"><div class="col-lg-3">{image}</div><div class="col-lg-6" style="padding-top: 10px;">{input}</div></div>',
                    ]) ?>

                    <div class="form-group">
                        <?= Html::submitButton('Отправить', ['class' => 'btn btn-default send-review']) ?>
                    </div>

                    <?php ActiveForm::end(); ?>

Код обработчика:

$(function(){
    var $form = $("#write-review-form");
    $form.submit(submitForm);

    function submitForm(e){
        e.stopImmediatePropagation();

        var $form = $(this),
            $writeReview = $("#write-review");

        $.ajax({
            type: 'POST',
            url: $form.attr('action'),
            data: $form.serialize(),
            dataType: 'json',
            success: function(data){
                console.log(data);
                $writeReview.modal('hide');
            }
        });

        return false;
    }
});

В чем может быть дело?

Answer 1

[Максим Федоров]

Для решение Вашей проблемы нужно использовать событие beforeSubmit, например:

$("#write-review-form").on('beforeSubmit', function () {
    return submitForm($(this));
});

function submitForm(form){
    if (form.data("yiiActiveForm").validated == false ) {
        return false;
    }
   // тут отправляем форму аяксом
}

Но стоит помнить что в случае отправки формы яксом будет отработана только клиентская валидация (если она включена), а серверную валидацию Вам придется обрабатывать самостоятельно

Comments

[Crash]

спасибо, попробую. beforeSubmit вроде нет в jquery, это yii-шный обработчик?

[Максим Федоров]

да это yii-шный

Answer 2

[Максим Тимофеев]

Валидация не успевает сработать, до того как Вы перехватываете скриптом отправку и отправляете форму.
Поэтому или используйте совет Максим Федоров или используйте встроенный метод ajax валидации и отправки.

<?php $form = \yii\widgets\ActiveForm::begin([
    'id' => 'my-form-id',
    'action' => 'save-url',
    'enableAjaxValidation' => true,
    'validationUrl' => 'validation-rul',
]); ?>

Answer 3

[Дмитрий]

Добрый день.
Возможно Вам поможет данное видео.