Selamat malam,
Waktu sudah menunjukkan jam setengah 2 pagi, mata sudah ngantuk, tinggal 5 watt katanya banyak orang di FB. Pada kebanyakan orang normal lainnya mungkin sudah terbuai dengan mimpinya. Tapi kebetulan belum tidur karena habis sibuk mendownload naruto seri terbaru.
Sekarang sudah berada di atas tempat tidur, banyak orang menyebutnya “lagi PW” alias posisi wenak. Tapi entah kenapa kok merasa ada yang kurang. Jadi inget udah lama tidak posting blog lagi. Iseng-iseng cari materi share, akhirnya menemukan bahan buat disharingkan. Tapi maaf kalo share kali ini agak kuno, tapi bagi penulis ini penting, bagi yang berminat dengan pemrograman web terutama yang sedang atau sudah mahir menggunakan framework CodeIgniter.
Kali ini saya membahas tentang menggunakan validasi form dengan menggunakan javascript dengan menggunakan Jquery. Tapi penulis tidak aka
n membuat script validasi sendiri, penulis menggukan plugin validasi dari Jquery dengan nama jquery.validate.js dapat didownload disini.
Peralatan sudah ada, mari kita lanjutkan operasi kali ini:
Buat controller dengan nama form.php:
load->helper('url');
$this->load->helper('form');
}
function index()
{
$data['form'] = array('id'=>'form');
$data['fNama'] = array('name'=>'fNama','id'=>'fNama','size'=>40);
$data['fEmail'] = array('name'=>'fEmail','id'=>'fEmail','size'=>40);
$data['fPesan'] = array('name'=>'fPesan','id'=>'fPesan','rows'=>8,'cols'=>40);
$this->load->view('form',$data);
}
}
Kemudian buat view dengan nama form.php
<script src="<?=base_url()?"><!--mce:0--></script> <script src="<?=base_url()?"><!--mce:1--></script> <script src="<?=base_url()?"><!--mce:2--></script> Untitled Document <div> <fieldset> <legend>Form</legend> <div>Nama :</div> <div>Email :</div> <div>Pesan :</div> <div></div> </fieldset> </div>
Selanjutnya untuk css nya:
.form-div {width: 600px; margin:0 30px;}
fieldset { border:solid 2px #ccc;padding:5px;}
legend {padding:0 15px 0 10px;font:bold .8em "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;font-weight:bold;color:#666;text-transform:uppercase;border:1px solid #ccc;background:#f4f4f4;letter-spacing:2px}
.form-div .submit {margin-left: 110px;margin-top: 10px;border:solid 1px #cccccc;border:solid 1px #cccccc; padding:5px 10px;color:#333;}
.form-div .reset {margin-left: 5px;margin-top: 10px;border:solid 1px #cccccc;border:solid 1px #cccccc; padding:5px 10px;color:#333;}
.form-div .label {display: block;float: left;width: 105px;text-align: right;margin-right: 5px;}
.form-div .form-row {padding: 10px 0;clear: both;width: 625px;}
.form-div label.error {width: 250px;display: block;float: left;color: red;padding-left: 10px;}
.form-div input[type=text],input[type=password], select, textarea {width: 250px;float: left;}
.form-div textarea {height: 80px;}
Sedangkan untuk perintah pemanggilan validasinya: