Membuat Data Validation Dengan AJAX di Yii Framework

Membuat Data Validation Dengan AJAX di Yii Framework - Sebelumnya kita sudah pernah membuat Data Validation melalui model, berbeda dengan sebelumnya validasi data dilakukan setelah kita mengirim atau submit data bayangkan jika seorang user sudah mengisi field data yang lumayan banyak kemudian ia melupakan satu form kemudian dia langsung mensubmitnya, maka sudah pasti data tidak akan valid maka ia haru mengisi lagi dari awal. Nah, dengan Ajax ini validasi data akan dilakukan ketika terjadi perpindahan kursor dari suatu field ke field yang lain jadi ketika user terlewat pada suatu filed notifikasi akan langsung muncul tanpa dia harus mengirimnya. tentunya proses ini lebih cepat di bandingkan dengan sebelumnya yang harus mengirim datanya terlebih dahulu.

Baca juga : Membuat Date Picker di Yii Framework

Dengan Yii Framework kita dapat dengan mudah membuat validasi data dengan Ajax karna kita akan menggunakan Widget Form yang sudah disediakan oleh Yii kita hanya perlu menyisipkan kode berikut pada widget form kita :

'enableClientValidation'=>TRUE

Langsung saja kita mulai prakteknya Membuat Data Validation Dengan AJAX di Yii Framework.Jika anda belum pernah membuat databasenya bisa anda lihat Di Sini dan  Jika anda belum menginstal Yii Di localhost anda dapat melihatnya Di Sini.

1. View

Bukalah kembali file create.php anda yang berada dalam direktori Protected/view/buku, kita akan merubah scriptnya menjadi menggunakan Widget Form dengan mengubah scriptnya menjadi seperti ini :

<div class='form'>
        <?php $form = $this->beginWidget('CActiveForm',array('id'=>'buku-form','enableClientValidation'=>TRUE));
            echo $form->errorSummary($model);
        ?>

        <div class='row'>
            <?php
                echo $form->labelEx($model, 'Judul : ');
                echo $form->textField($model, 'judul','');
                echo $form->error($model, 'judul');
            ?>
        </div>
<div class='row'>
            <?php
                echo $form->labelEx($model, 'Penulis : ');
                echo $form->textField($model, 'penulis','');
                echo $form->error($model, 'penulis');
            ?>
        </div>
<div class='row'>
            <?php
                echo $form->labelEx($model, 'Kategori : ');
                echo $form->dropDownList($model,'id_kategori',
CHtml::listData($k_model->findAll(), 'id_kategori', 'nama_kategori'),
array('empty'=>'–please select–'));
                echo $form->error($model, 'id_kategori');
            ?>
        </div>
<div class='buttons'>
            <?php
                echo CHtml::submitButton($model->isNewRecord ? 'Create' : 'Update');
                $this->endWidget();
            ?>
        </div>
</div>

Penjelasan :

 $this->beginWidget('CActiveForm',array('id'=>'buku-form'

Digunakan untuk membuka widget form

'enableClientValidation'=>TRUE

Script inilah yang kita gunakan untuk ajax validation

echo CHtml::submitButton($model->isNewRecord ? 'Create' : 'Update');

Digunakan untuk membuat tombol submit denga suatu kondisi jika data yang dimasukan merupakan datta baru maka tulisan pada tombol adalah "Create" jika data sudah ada "Update".

$this->endWidget();

Untuk menutup widget form

Untuk melihat hasilnya, ketikan di url browser :

http://localhost/Belajar_Yii/website/index.php?r=buku

*notes kode yang berwarna merah adalah direktori folder Yii Framework anda di localhost.

Klik Tambah Buku > Klik salah satu field > Klik field yang lain tanpa mengisi data

Maka akan muncul pesan error seperti di bawah :

Bagaimana cukup mudah bukan, sekarang validasi data sudah berhasil sampai ketemu lagi di post selanjutnya.

Data Validation Dengan AJAX di Yii Framework sekarang sudah selesai, baca juga tutorial belajar Yii Framework lainnya.