yii2: ActiveForm -> client validation does not work with AJAX rendering

I’ve some code: CONTROLLER:

    public function actionCreate()
    {
        $model = new Candidate();

        if ($model->load(\Yii::$app->getRequest()->post())) {
            $model->recruiter_id = \Yii::$app->getUser()->getId();

//            if (\Yii::$app->getRequest()->getIsAjax()) {
//            }
            if ($model->save()) {
                $model->refresh();
                \Yii::$app->response->format = 'json';

                return [
                    'success' => true,
                ];
            }
        }

        return $this->renderAjax('create', [
            'model' => $model,
        ]);
    }

index VIEW

<!-- Candidate modal -->
<?php Modal::begin([
    'id' => 'candidate-modal',
    'header' => '<h4 class="modal-title">Add new candidate</h4>',
    'footer' =>
        Html::button('Close', ['class' => 'btn btn-default', 'data-dismiss' => 'modal'])
        . PHP_EOL .
        Html::button('Add', ['class' => 'btn btn-primary btn-modal-save']),
    'options' => [
        'role' => 'dialog',
        'aria-labelledby' => 'candidate-modal-label',
        'aria-hidden' => 'true',
        'data-url' => Url::to('candidate/create'),
    ],
]); ?>
<?php Modal::end() ?>

candidate VIEW

<?php
use yii\widgets\ActiveForm;
?>
<?php $form = ActiveForm::begin([
//    'beforeSubmit' => 'window.forms.candidate',
    'enableClientValidation' => true,
//    'enableAjaxValidation' => true,
]); ?>
    <?= $form->field($model, 'first_name')->textInput(); ?>
    <?= $form->field($model, 'last_name')->textInput(); ?>
<?php ActiveForm::end(); ?>

rendered HTML

<div class="modal-body"><form id="w0" action="/candidate/create" method="post">
<input type="hidden" name="_csrf" value="UXVKckwtbzYUECYxNEYpRT4REEoDfi4DCR8ABTVYKHsjMisqFXkOZg==">    <div class="form-group field-candidate-first_name required">
<label class="control-label" for="candidate-first_name">First Name</label>
<input type="text" id="candidate-first_name" class="form-control" name="Candidate[first_name]">

<div class="help-block"></div>
</div>    <div class="form-group field-candidate-last_name required">
<label class="control-label" for="candidate-last_name">Last Name</label>
<input type="text" id="candidate-last_name" class="form-control" name="Candidate[last_name]">

<div class="help-block"></div>
</div></form><script src="/assets/14ae0e44/jquery.js"></script>
<script src="/assets/51cc1bad/yii.js"></script>
<script src="/assets/51cc1bad/yii.validation.js"></script>
<script src="/assets/51cc1bad/yii.activeForm.js"></script>
<script type="text/javascript">jQuery('#w0').yiiActiveForm({"first_name":{"validate":function (attribute, value, messages, deferred) {yii.validation.required(value, messages, {"message":"First Name cannot be blank."});yii.validation.string(value, messages, {"message":"First Name must be a string.","min":2,"tooShort":"First Name should contain at least 2 characters.","max":255,"tooLong":"First Name should contain at most 255 characters.","skipOnEmpty":1});},"id":"candidate-first_name","name":"first_name","validateOnChange":true,"validateOnType":false,"validationDelay":200,"container":".field-candidate-first_name","input":"#candidate-first_name","error":".help-block"},"last_name":{"validate":function (attribute, value, messages, deferred) {yii.validation.required(value, messages, {"message":"Last Name cannot be blank."});yii.validation.string(value, messages, {"message":"Last Name must be a string.","min":2,"tooShort":"Last Name should contain at least 2 characters.","max":255,"tooLong":"Last Name should contain at most 255 characters.","skipOnEmpty":1});},"id":"candidate-last_name","name":"last_name","validateOnChange":true,"validateOnType":false,"validationDelay":200,"container":".field-candidate-last_name","input":"#candidate-last_name","error":".help-block"}}, {"errorSummary":".error-summary","validateOnSubmit":true,"errorCssClass":"has-error","successCssClass":"has-success","validatingCssClass":"validating","ajaxParam":"ajax","ajaxDataType":"json"});</script></div>

So, no client no ajax validations does not work.

About this issue

  • Original URL
  • State: closed
  • Created 10 years ago
  • Reactions: 1
  • Comments: 17 (6 by maintainers)

Most upvoted comments

Hi guys,

I find out the problem this is not due to preload (but may be can check later). but its due to form ID which is duplicated.

Please use this code.

<?php $form = ActiveForm::begin([
//    'beforeSubmit' => 'window.forms.candidate',
    'enableClientValidation' => true,
//    'enableAjaxValidation' => true,
    'id' => 'someform'
]); ?>

this will solve duplicate id on html document.

Yes.

because main page also have id is w0 now in modal remote page also have w0.

now in javascript first w0 get selected that might not be a form so validation will not worked.

I have just work around and have this problem, which rectified by this solution.

you may verify.