Membuat Validasi Form dengan jQuery Persiapan Projek buat sebuah folder dengan nama my_form_validation buat sub-direktori css dan js tambahkan sebuah file index.html tepat di bawah my_form_validation. Hasilnya seperti pada gambar berikut: Step by step Buka index.html dan tambahkan kode di bawah ini: Validasi Form dengan jQuery

Nama :

Email :

Telpon :

Alamat :

Pesan :

Buka file di atas dengan menggunakan browser kesukaan Anda. Untuk menambahkan validasi form tambahkan jquery.1.4.js dan jquery.validate.js (terdapat di direktori sesi 13\source) ke dalam sub-direktori js. Kemudian pada index.html tepatnya pada bagian tag tambahkan kode berikut: Validasi Form dengan jQuery File form.validation.js belum ada, maka buat file tersebut tepat dalam sub-direktori js. Kemudian mari kita definisikan validasinya satu persatu: $(document).ready(function() { /* Contact Form validation */ $("#contact form").validate({ rules: { name: { required: true } }, success: function(label) { label.html('').addClass('correct'); } });

}); Sekarang refresh browser Anda kemudian coba klik tombol submit. Perhatikanlah di samping field Nama akan muncul pesan. Jika Anda isi field Nama, maka akan muncul tanda check. Sekarang tambahkan validasi untuk input yang lain seperti berikut: $(document).ready(function() { /* Contact Form validation */ $("#contact form").validate({ rules: { name: { required: true }, email: { required: true, email: true }, phone: { required: true }, address: { required: true }, message: { required: true, minlength:20 } }, success: function(label) { label.html('').addClass('correct'); } });

}); Untuk mempercantik tampilan validasi, tambahkan CSS pa tag header berikut: Validasi Form dengan jQuery

Kemudian buat sebuah file baru di bawah sub-direktori css dengan nama validation.css. Isi dengan kode berikut: /* for validation */ label.error, label.correct { text-align: left; padding: 3px; font-size: 11px; color: #fff; position: absolute; display: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: -1px 1px 2px #a9a9a9; -moz-box-shadow: -1px 1px 2px #a9a9a9; box-shadow: -1px 1px 2px #a9a9a9; } label.error { background: #f60000; } label.correct { background: #56d800; }

input.error{ border: 1px solid #f60000; } Sekarang coba refresh browser Anda dan cobalah lakukan pengetesan seperti sebelumnya.