Membuat captcha dengan ajax validation true di yiiframework

1 Tanggapan

Biasanya kalau menggunakan captcha di yiiframework kita biasa menggunakan ajax validation false. Tetapi apabila ajax validation bernilai true maka captcha tersebut tidak dapat berfungsi dengan baik lagi. Nah bagaimana cara menangani masalah tersebut langsung saja kita bahas kali ini.

Nah awalnya kan form seperti ini di view

<div class="form">

<?php $form=$this->beginWidget('CActiveForm', array(
 'id'=>'user-form',
 'enableAjaxValidation'=>false,
        'htmlOptions'=>array('enctype'=>'multipart/form-data'),

)); ?>

 

Ubah menjadi

<div class="form">
 <?php
 // Snippet that reloads the captcha image after validation
 $updateCaptcha=<<<EOD
function(form,attribute,data,hasError) {
    var i=form.find('.captcha img').first(),
                h=/^.*\/v\//.exec(i.attr('src'));  // will cut off the number part at the end of image src URL (".../v/123456")
    i.attr('src',h+Math.floor(100000*Math.random()));  // creates a new random number to prevent image caching
    return true;
}
EOD;

 $form=$this->beginWidget('CActiveForm',array(
   'id'=>'user-form',
   'enableAjaxValidation'=>true,
   'focus'=>'login',
   'clientOptions'=>array(
     'validateOnSubmit'=>true,
     'afterValidateAttribute'=>'js:'.$updateCaptcha,
     'afterValidate'=>'js:'.$updateCaptcha,
   ),
   'htmlOptions'=>array('enctype'=>'multipart/form-data'),
 ));
 ?>

Setelah itu jangan lupa code untuk captchanya

<?php if(extension_loaded('gd')): ?>
 <div class="row">
  <?php echo $form->labelEx($model,'verifyCode'); ?>
  <div>
   <?php $this->widget('CCaptcha'); ?>
   <?php echo $form->error($model,'verifyCode'); ?>
   <?php echo $form->textField($model,'verifyCode'); ?>
  </div>

 </div>
 <?php endif?> 

Tambahkan Rules di modelnya

array('captcha','required','on'=>'register'),
    array('captcha',  // Must be _after_ required rule
      'captcha',
      'on'=>'register',
      'captchaAction'=>'komentarUser/captcha',
      'skipOnError'=>true,    // Important: Only validate captcha if 'required' had no error (a.k.a. "if not empty")
    ),

Sekarang tambahkan action di controllernya:

public function actions(){
  return array(
    // captcha action renders the CAPTCHA image displayed on the contact page
    'captcha'=>array(
      'class'=>'CCaptchaAction',
      'backColor'=>0xFFFFFF,
      'testLimit'=>0,
      
    ),
    'page'=>array(
      'class'=>'CViewAction',
    ),
  );
 }

Ok silahkan cba untuk mengeset enableAjaxValidation true.
NOTE:
Nah jika form yang kita load adalah form hasil partialRender otomatis kita harus juga menyesuaikan bagaimana captcha itu dapat working.

Untuk mengeset agar validasinya tetep benar kita harus menambahkan captchaAction pada form kita seperti ini :

<?php if(extension_loaded('gd')): ?>
 <div class="row">
  <?php echo $form->labelEx($model,'verifyCode'); ?>
  <div>
   <?php $this->widget('CCaptcha',array('captchaAction'=>'komentarUser/captcha')); ?>
   <?php echo $form->error($model,'verifyCode'); ?>
   <?php echo $form->textField($model,'verifyCode'); ?>
  </div>

 </div>