Form Validator Dengan Metro UI CSS

Metro UI CSS dikembangkan dari Microsoft dengan menampilkan desain yang rapi dan lebih menarik. Metro UI CSS ini merupakan kerangka front-end untuk mengembangkan serta membangun user interface yang memiliki banyak fitur yang menarik dan sederhana meliputi : Grid Layout, Typografi, 20 + komponen, Widget, 300 + built-in ikon, Fitur slideshow dan masih banyak lagi yang dimana design Metro UI CSS ini sangat cocok diterapkan di semua perangkat device seperti mobile atau smartphone.

Pada artikel kali ini saya akan membahas Widget yang membuat validasi form client side yang sederhana dan penuh animasi dan menawarkan metode validasi termasuk URL, Email, Hex Warna, Nilai Min dan Max. Kita akan mulai mencobanya, temen temen bisa kunjungi website resminya untuk mendownload kerangka Metro UI CSS pada link tersebut  https://metroui.org.ua/
Setelah temen temen download. temen temen bisa sisipkan atau buat struktur dari kerangka Metro UI CSS nya sebagai berikut

dan kemudian buatlah sebuah form inputan sebagai berikut

Pada kasus diatas inputan yang saya akan buat hanya bisa di isi Min 6 karakter jadi ketika user memasukkan karakter kurang dari 6 akan terlihat seperti berikut

Sedangkan jika user mengisi form tersebut lebih dari 6 karakter akan terlihat seperti berikut

Selamat Mencoba