Validasi kesamaan 2 field password dengan Angular JS

angular

Field Password dan Confirm Password sering kita temui di form-form registrasi. Selain untuk memverifikasi bahwa password yang dimasukkan adalah sama maka perlu adanya validasi/pengecekan.

Selain pengecekan di server side, penting juga dilakukkan pengecekan di front-end untuk menambah kenyamanan pengguna, karena lebih cepat dan instan hasilnya.

Prinsip validasi ini pasti semua sudah tahu, yaitu : ” Kita punya 2 buah field password, Password dan Confirm password. Pengecekan akan dilakukkan ketika kita mengetikkan sesuatu di field Confirm password secara realtime. Ketika password dan confirm password mempunyai nilai sama, maka dinyatakan valid.

Nah sekarang kita masuk ke bagian implementasi, sebenarnya melakukkan pengecekan itu sama sekali tidak sulit, hanya dengan vanila javascript ataupun jQuery bisa dilakkukkan dengan sangat mudah.

Berhubung akhir-akhir ini saya banyak pakai Angular JS untuk proyek, jadi disini saya akan coba demokan dengan caranya Angular JS.

Untuk mengerti kode yang akan saya demokan, anda diharapkan sudah pernah memakai Angular JS sebelumnya. Disini saya akan demokan dengan membuat sebuah Angular JS Directive untuk menghandle proses validasi ini.

Kenapa Directive? kenapa tidak Controller biasa saja? Karena menurut saya dengan Directive kita bisa menghindari proses yang berulang-ulang, artinya satu directive bisa kita aplikasikan ke berbagai tempat/bagian di situs kita. WE LOVE DRY, ISN’T?

Tanpa basa-basi panjang, kita langsung coba demonya di bawah ini:

Catatan: Pada demo diatas terdapat tab Code, anda bisa klik dan melihat source asli dari demo tersebut. Anda bisa lihat kode JavaScript, HTML dan juga CSS yang saya gunakan.

Karena diatas sudah saya sediakan demonya secara langsung, sekaligus anda bisa melihat semua kodenya, jadi saya tidak akan menjelaskan secara detail tentang tiap baris kode yang ada, karena seperti yang saya bilang tadi sedikit pengetahuan Angular JS diperlukan untuk memahami kode tersebut.

Bagi yang tertarik membahas lebih dalam bisa komen di bawah ya, ndak tau kenapa belakangan ini saya lebih suka menulis secara singkat saja :). Tetapi saya harap tidak mengurangi maksud yang ingin saya sampaikan.

Happy Coding!

Update 17 Desember 2013:

Berdasarkan dari komentar seorang pembaca di bawah, validasi seperti diatas juga sudah tersedia di dalam module “ui-validate” (tetapi dengan metode sedikit berbeda) yang merupakan bagian dari UI Utils-nya Angular UI. Module ini bisa menghemat waktu anda untuk melakukkan validasi sebuah form, karena berbagai jenis validasi bisa dilakukkan.

Tapi yang penting perlu diingat adalah, jangan pernah mempercayakan 100% validasi anda di tingkat front-end, sebaiknya/seharusnya validasi di server side juga mutlak dilakukkan.

One thought on “Validasi kesamaan 2 field password dengan Angular JS

Leave a Reply

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