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

[akaNightmare]

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.

[vov4ik08]

Submit button must be before , in html code before , if you use modal windows you submit button , may be after the tag

[mithun12000]

I guess problem is /assets/51cc1bad/yii.validation.js and /assets/51cc1bad/yii.activeForm.js not preloaded so yiiActiveForm plug-in not available while executing jQuery('#w0').yiiActiveForm

[mithun12000]

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.

[samdark]

You mean one should set ID manually in this case?

[mithun12000]

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.

[samdark]

Ah, then I think it should be mentioned somewhere already. I'll check it.

[samdark]

Thanks for finding it out.

[mithun12000]

you welcome.

[davidsonalencar]

+1

[machour]

what's the status of this issue, especially the problem with id conflicts mentioned by @mithun12000 ?
should yii learn to generate different id for all pages/elements or should the developer force another id ?

[gruposilvercompany]

Hello, I am currently presenting the same problem and I could not even solve this, if anyone knows how to solve this problem and is kind enough to Share.

[gruposilvercompany]

hola, actualmente estoy presentando el mismo problema y aun no e podido solventarlo, si alguien sabe como solventar ese problema y es tan amable de compartilo.

[gruposilvercompany]

validating unique values it is rendered and performed but misses the modal

[gruposilvercompany]

al validar valores únicos la misma se renderiza y lo efectúa pero se pierde el modal

[rezasys2]

mithun12000 , Thanks alot your solution worked nice :+1:

[mithun12000]

@Curso-Programacion I am not working on this issue. @rezasys2 you welcome.

[dynasource]

seems to be solved.