После создания формы Ajax не проходит валидация?

Question

[Сергей Беловенцев]

Добавляю форму при помощи Ajax но она не проходит валидацию на клиенте. Там присутствует форма но исходя из выбора пользователя часть формы меняется. Следующим образом отправляется ajax запрос указывается какой выбор пользователь сделал, меняется форма и тем же скриптом в случае получения ответа меняется часть формы собственно вот так записано в js

$('#deliveryForm .radio-tab input').change(function () {
            var datas = $(this).val();
            $.ajax({
                method: "POST",
                url: "/cart",
                data: 'delivery='+datas,
                success: function (data) {
                    $.pjax.reload({container: "#pjax-form-cart"});
                    $('#deliveryForm .radio-tabs .tab-pane').removeClass('active');
                    $('#deliveryForm .radio-tabs .tab-pane.delivery2').addClass('active');
                }
            })
    
        });

вот так в контролере обрабатываю выбор пользователя

public function actionIndex(){
          if(Yii::$app->request->isAjax &&isset($post['delivery']))
                $this->userCartChoice($post['delivery']);
                 $choice= UserCartChoice::find()->one();
           ...
    }
     private function userCartChoice($choise){
            $userChoise=UserCartChoice::find()->one();
            if(!$userChoise)
                $userChoise= new UserCartChoice();
            $userChoise->choice=$choise;
            $userChoise->save();
        }

ну и соответственно весь заменяемый блок

<?php Pjax::begin(['id' => 'pjax-form-cart']); ?>
        <div class="tab-content">
            <div class="tab-pane delivery1 <?= ($userChoice==0)?'active':''?> ">
                <?php  if($userChoice==0){ echo PickUp::widget(['form'=>$form]); } ?>
            </div>
            <div class="tab-pane delivery2 <?= ($userChoice==1)?'active':''?>">
                <?php  if($userChoice==1){ echo DeliveryPiter::widget(['form'=>$form]); } ?>
            </div>
        </div>
        <?php Pjax::end(); ?>

И когда я создаю форму она не валидируется. На клиенте. Если нажимаю кнопку отправить. Ошибки валидации показывается.
Я так понимаю надо инициализировать заново проверку. Вопрос что надо инициализировать

Answer 1

[Сергей Беловенцев]

В общем я решил вопрос следующим образом

<?php $this->registerJs("
    $('#pjax-form-cart').on('pjax:end',function(){
        $('#deliveryForm .required input').on('blur',function(){
            var id= $(this).attr('id');
            $('#deliveryForm').yiiActiveForm('validateAttribute', id);
        })  
    });", yii\web\View::POS_READY); ?>

в каждой вьюхе виджета

Answer 2

[Артем]

Я правильно вас понял, что вы решили вместо

<?php $form = ActiveForm::begin([
    'action'=>'cart/checkout', 
    'method'=>'post',
    'id'=>'deliveryForm',
    'enableAjaxValidation' => true
 ]) ?>

Решили в саму форму впихнуть Pjax-container, который перезагружает html внутри себя?

Comments

[Сергей Беловенцев]

так проще для реализации и красивее для кода. А в чем проблема ?

[Артем]

Сергей Беловенцев, т.е. просто вместо того, чтобы написать строку в конфиге формы, вы тащите целый Pjax, чтобы валидировать форму? Странные у вас понятия о простоте реализации и простоте кода. И да, клиентская валидация у вас не работает, потому что когда pjax перезагружает контейнер, инициализацию формы он заново не проводит.

Answer 3

[Дмитрий]

Добрый день.
Это видео Вам поможет.
Pjax тут совсем не нужен.
Вам в параметрах надо указать, что нужна ajax валидация, сделать действие для этой валидации и указать адрес, по которому будет проходить валидация.
Приблизительно вот так:

$form = ActiveForm::begin([
      'id' => 'testForm',
      'enableAjaxValidation' => true,
      //'enableClientValidation' => false,
      'validationUrl' => ['dynamic/ajax-validation']
  ]);

// и действие в контролере
if (Yii::$app->request->isAjax && $model->load(Yii::$app->request->post())) {
    Yii::$app->response->format = Response::FORMAT_JSON;
    return ActiveForm::validate($model);
}

Comments

[Сергей Беловенцев]

PJax я использую для другого. для того что бы обновить часть страницы. Начинающуюся от сюда.
<?php Pjax::begin(['id' => 'pjax-form-cart']); ?>

[Дмитрий]

Сергей Беловенцев, в любом случае валидацию Вы делаете не совсем правильно. Посмотрите видео. И здесь смотрите.
У Вас форма сразу на странице присутствует?

[Сергей Беловенцев]

Не сработало. Я все-таки подозреваю что надо заново инициализировать activeform.js

[Сергей Беловенцев]

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

$('#deliveryForm .radio-tab input').change(function () {
        var datas = $(this).val();
        $.ajax({
            method: "POST",
            url: "/cart",
            data: 'delivery='+datas,
            success: function (data) {
                $.pjax.reload({container: "#pjax-form-cart"});
                $('#deliveryForm .radio-tabs .tab-pane').removeClass('active');
                $('#deliveryForm .radio-tabs .tab-pane.delivery2').addClass('active');
            }
        })

    });

[Сергей Беловенцев]

slo_nik, вот так в контролере обрабатываю выбор пользователя

public function actionIndex(){
      if(Yii::$app->request->isAjax &&isset($post['delivery']))
            $this->userCartChoice($post['delivery']);
             $choice= UserCartChoice::find()->one();
       ...
}
 private function userCartChoice($choise){
        $userChoise=UserCartChoice::find()->one();
        if(!$userChoise)
            $userChoise= new UserCartChoice();
        $userChoise->choice=$choise;
        $userChoise->save();
    }

[Сергей Беловенцев]

ну и соответственно весь заменяемый блок

<?php Pjax::begin(['id' => 'pjax-form-cart']); ?>
    <div class="tab-content">
        <div class="tab-pane delivery1 <?= ($userChoice==0)?'active':''?> ">
            <?php  if($userChoice==0){ echo PickUp::widget(['form'=>$form]); } ?>
        </div>
        <div class="tab-pane delivery2 <?= ($userChoice==1)?'active':''?>">
            <?php  if($userChoice==1){ echo DeliveryPiter::widget(['form'=>$form]); } ?>
        </div>
    </div>
    <?php Pjax::end(); ?>

[Дмитрий]

Сергей Беловенцев, https://yii2-cookbook.readthedocs.io/forms-activef...
По ссылке есть, как обработать динамические поля формы.

[Сергей Беловенцев]

slo_nik, опять же согласен но вот я не понимаю как потому что вот это не сработало

$('#deliveryForm').yiiActiveForm('validate', true);

как и вот так

$('#pjax-form-cart').on('load',function(){
    $('#deliveryForm').yiiActiveForm();  
});

и вот так тоже

$('#pjax-form-cart').on('load',function(){
    $('#deliveryForm').yiiActiveForm('validate', true); 
});

[Сергей Беловенцев]

А нет вру вот это запустило валидацию, но странным образом поле сразу после создание все обязательные поля высвечивает с ошибкой.

[Дмитрий]

Сергей Беловенцев, вот поэтому читайте по ссылке, как сделать так, чтобы не подсвечивало все поля.

$('#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"});
    }
});

[Сергей Беловенцев]

slo_nik, так это надо для создания поля, а не для проверки валидации. Мне не вариант создавать поле таким образом.

[Дмитрий]

Сергей Беловенцев, это для валидации динамически добавленных полей.

[Дмитрий]

Сергей Беловенцев, или, как вариант, откажитесь от activeform.js и делайте на чистом jquery(js)

[Сергей Беловенцев]

slo_nik, хорошо помогите мне тогда заполнить а то у меня чушь получается вот это поле

<?= $form->field($model, 'street')->textInput();  ?>

рендерится так

<div class="form-group field-order-street required">
       <label class="control-label" for="order-street">Улица</label>
       <input type="text" id="order-street" class="form-control" name="Order[street]" aria-required="true">
       <p class="help-block help-block-error"></p>
</div>

инициализирую так

$("#deliveryForm").yiiActiveForm("add", {
        id: "order-street",
        name: "Order[street]",
        container: ".field-order-street",
        input: "#order-street",
        error: ".help-block",
        validate:  function (attribute, value, messages, deferred,$form ) {
            yii.validation.required(value, messages, {message: "Validation Message Here"});
        }
    }); '

[Сергей Беловенцев]

это правильно ?

[Дмитрий]

Сергей Беловенцев, без обид, но я сам не до конца разобрался в этом вопросе. Могу показать свой недокод, а Вы уже под себя попробуете переделать.

[Сергей Беловенцев]

у меня уже получилось можете посмотреть как я решил этот вопрос