Cara Menggunakan BootstrapValidator

Posted on

BootstrapValidator

 

Halo sahabat programmer, jumpa lagi dengan lambecode. Pembahasan kita kali ini tentang cara membuat form validasi dengan menggunakan BootstrapValidator. Validasi dari sebuah form / formulir pada halaman website / aplikasi online sangat penting. Mengapa sangat penting? Karena validasi form dapat mengurangi kesalahan user ketika melakukan input data pada sebuah form. Jika tidak ada validasi dari sebuah form, maka hasil input oleh user belum tentu benar. Misalkan baris untuk mengisi nama yang seharusnya diisi dengan string / varchar, jika tidak ada validasi maka user dapat mengisinya dengan angka ataupun karakter aritmatika. Hal itu merupakan sesuatu yang sangatlah penting.

Di dunia nyata, validasi tetap harus dilakukan ketika seorang pengisi formulir sudah mengisi formulir. Jika terjadi kesalahan, maka seorang validator akan mengembalikan formulir tersebut kepada si pengisi formulir untuk diperbaiki lagi / diisi ulang. Sekarang anda mungkin dapat membayangkan pentingnya validator pada sebuah form / formulir. Oleh karena itu, belajar cara membuat form validasi dengan plugin Bootstrap yaitu BootstrapValidator sangatlah penting.

Anda dapat membuat validator secara manual ataupun menggunakan bantuan plugin. Kami share tutorial menggunakan form validator dengan menggunakan plugin yaitu BootstrapValidator. BootstrapValidator merupakan plugin jQuery terbaik untuk validasi form yang di desain untuk bootstrap 3+. Untuk bootstrap 4, sudah support namun kami menggunakan bootstrap 3 sebagai contoh karena css BootstrapValidator lebih cocok dengan bootstrap 3+.

Install BootstrapValidator Offline

  1. Download BootstrapValidator
  2. Unzip / Ekstrak
  3. Letakkan direktori BootstrapValidator ke dalam project yang digunakan
  4. Panggil css dan js di dalam file index.php

Perlu diketahui, jika menggunakan BootstrapValidator harus install bootstrap 3 / bootstrap 4 terlebih dahulu. Berikut ini merupakan struktur dari direktori BootstrapValidator.

Untuk contoh pemanggilan BootstrapValidator sebagai berikut :

 

Install BootstrapValidator Online

Proses instalasi BootstrapValidator secara online, hanya dengan menyertakan link yang di dapat dari CDN. CDN ( Content Delivery Network ) adalah sebuah teknologi terbaru sebagai bentuk mirroring content website kita. Dengan menggunakan CDN maka content web kita seperti CSS, Image, Video, Custom Scripts akan di mirror di server cadangan yang terletak di berbagai negara. Berikut ini script untuk menyertakan link dari CDN.

Anda dapat memilih antara cdns atau jsdlivr. Kelebihan instalasi secara online, lebih dinamis karena penempatan file css dan js ada di server cdn. Namun sebagai programmer tidak dapat melakukan modifikasi terhadap css maupun js yang disediakan. Sebaliknya jika instalasi offline, programmer dapat melakukan modifikasi terhadap file css dan js namun kurang dinamis.

Jika dari lambecode, lebih menggunakan yang online karena lebih dinamis dan jika ingin melakukan custom dapat membuat css sendiri yang terkait dengan css dari BootstrapValidator. Namun jarang sekali programmer melakukan modifikasi terhadap plugin.

Untuk lebih jelasnya, buka halaman dokumentasi dari BootstrapValidator.

Contoh demo BootstrapValidator :

 

See the Pen OodPoV by b1em8in (@b1em8in) on CodePen.

Leave a Reply

Your email address will not be published. Required fields are marked *