Ajax validation in Yii2
Home » BLOG » Yii2.0 framework » Ajax validation in Yii2

Ajax validation in Yii2

category:  Yii2.0 framework

Yii version 2.0.13.1 

When you are working on a form validation, sometimes it is better for the users if you do the Ajax validation on a form. This way, users will get the warning message after they fill in each field.

Here is an example. We have a branch table. We want a branch name to be unique.

What we will do:
  • Model – In a branch model, we set the branch name in a unique rule.
<?php
    /**
     * @inheritdoc
     */
    public function rules()
    {
        return [
            ...
            [['name'], 'unique'],
            ...
        ];
    }
?>
  • View – In the view file, we add `validationUrl` and `enableAjaxValidation` attributes in the form.

Here is a snippet.

<?php
    // Fixing the unique validation on update action
    $validationUrl = ['branch/validation'];
    if (!$model->isNewRecord)
        // if the current record is not new, we will pass "id" for validation in update action.
        $validationUrl['id'] = $model->id;
?>

<?php $form = ActiveForm::begin(
    [
        'options' => [
            'id' => 'create-update-form',  // form id is needed for Ajax validation
            'data-pjax' => 1, 
        ],
        'enableAjaxValidation' => true,   // enableAjaxValidaiton
        'validationUrl' => $validationUrl,  // call this URL when performs the Ajax validation
    ]       
);?><span id="mce_marker" data-mce-type="bookmark" data-mce-fragment="1">​</span>

For `enableAjaxValidation` attributes, you can set it at form level just like the snippet above or at field level. In my opinion, you should set the `enableAjaxValidation` attributes in the fields that you need to communicate with the server-side, for example, checking unique value. Otherwise, you will see the error messages of validation for all fields in a form even though you fill in only one field. Because the ActiveForm::validate() will validate all fields from $model each time the ajax calls.

Here is an example to set `enableAjaxValidation` attribute at the field level.

<?= $form->field($model, 'name', ['enableAjaxValidation' => true])->textInput(['maxlength' => true]) ?>

Note: Yii2 comes with client-side validation out-of-the-box. What you have to do, it just sets the rules() in the model. When users fill in the form, client-side validation will do the job automatically. But if you want to validate the value from some fields or all fields in the form that need to communicate with the server-side, you will need Ajax validation. You can use both client-side validation and ajax validation in one form. Oh, when both enableClientValidation and enableAjaxValidation are set to true, AJAX validation request will be triggered only after the successful client validation. More information is here.

  • Controller – Create a new validation action in the controller.

Here is a snippet

<?php
    /**
     * Ajax validation Url
     * 
     * @return  json    error messages for the validation
     * @params  integer $id
     */
    public function actionValidation($id = null)
    {
        // if "id" is not null(meaning the validation comes from update action), 
        // we will query the data from that id.
        // otherwise, the validaiton will perform for insert new record action.
        $model = $id===null ? new Branch() : Branch::findOne($id);
        if (Yii::$app->request->isAjax && $model->load(Yii::$app->request->post())) {

            Yii::$app->response->format = Response::FORMAT_JSON;
            return ActiveForm::validate($model);
        }
    } 
?>

That’s it. When users fill in the form, they will get the warning message according to the model rules right after filling in each field.

Besides, you can add filters and conditions for each validation rule. Here is the link.