Yii - How To Enable Ajax Form Validation
- Ajax
- form
- YII
Form validation ensures that each and every field in the form has been filled in the required way. No further prelude is required to this topic as Developers would be well aware of the purpose and function of form validations. In one of my bygone projects, I had a claim to validate a form with AJAX which I did successfully.
I found fewer online references while trying to achieve the purpose, hence thought of leaving a path to others so that this can be used as a reference, The following steps should be used to validate your Yii form using AJAX.
STEP 1: Declaring beginWidget()
In your Yii view form, declare beginWidget as mentioned below,
- <?php
- $form = $this->beginWidget('CActiveForm', array(
- 'id'=>'form', //form-id
- 'enableAjaxValidation'=>true,
- 'clientOptions'=>array(
- 'validateOnSubmit'=>true,
- ),
- ));
- ?>
And have form elements with a matching error function.
- <div class="row">
- <?php echo $form->labelEx($model,'attribute'); ?>
- <?php echo $form->textField($model,'attribute'); ?>
- <?php echo $form->error($model, 'attribute'); ?>
- </div>
- <div class="row">
- <?php echo $form->labelEx($model,'attribute1'); ?>
- <?php echo $form->textField($model,'attribute1'); ?>
- <?php echo $form->error($model, 'attribute1'); ?>
- </div>
Once the matching error functions have been written the Widget function can be closed with the below-mentioned syntax.
- <?php
- $this->endWidget();
- ?>
The above-mentioned step will include jquery.yiiactiveform.js, thus it is mandatory to have STEP 1.
STEP 2: Generating Response
In the controller, We need a response to the Ajax validation request. To do so make use of the below code
- if(isset($_POST['ajax'])) {
- if ($_POST['ajax']=='form') {
- echo CActiveForm::validate($model);
- }
- Yii::app()->end();
- }
STEP 3: Validation Rule
Make sure your model has at least one validation rule for that scenario
- public function rules()
- {
- return array(
- array('attribute, attribute1', 'required'),
- );
- }
STEP 4: Div Element
When we use $form->error(), Yii includes a hidden div after your form element.
- <input id="attribute" type="text" name="[attribute]" maxlength="120" size="20">
- <div id="attribute_em_" class="errorMessage" style="display:none"></div>
STEP 5: Change Div Style
If a field has a validation error, Yii changes the div style from none to block and adds an error message to that field. Hence whenever a field has failed in form validation the response can be seen in AJAX.
Hope this concept helps Yii developers.