Validasi form dengan HTML 5 dan Javascript

Validasi form dengan HTML 5 dan Javascript - Selamat pagi pejuang koding, dipai hari yang cerah ini, dari pada bermalas- alasan karena lagi puasa, mendingan kita belajar ngoding Ana, biar lebih varokah :D... Pada kesempatan kali ini saya akan berbagi tutorial sederhana yang mungkin sudah pada tau, tapi kali Aja ada yang belum tau, Hehe.. yaitu membuat sebuah validasi pada form inputan dengan fitur html5. Kehadiran Html5 benar benar membawa sesuatu yang baru, yang sangat mempermudah bagi designer Web daripada seri html sebelumnya. Salah satunya adalah penambahan fungsi required yang bisa kita gunakan untuk membuat sebuah validasi.
Sekarang kita coba dulu buat for inputannya., berikut kodenya.

Berikut tampilannya,

Tampilan yang amat sangat sederhana sekali ya Hehe,
Berikut penjelasan koding diatas:
1. Fungsi placeholder hanya untuk membuat tulisan bayangan saja
2. Fungsi validasi diisi menggunakan ‘required’, sehingga setiap inputan yang diberi fungsi required wajib diisi, jika tidak diisi maka akan muncul notifikasi perintah untuk mengisi form yang belum terisi tersebut. Seperti pada gambar berikut.

3. Pada baris 23-31 adalah fungsi javascript untuk membuat for inputan string namun hanya berupa angka, yang dimaksudkan untuk membuat inputan Nomor telepon. Karena jika menggunakan type number maka karakter Nol(0) tidak akan terbaca jika berada dibaris urutan paling depan.
4. Input type email digunakan untuk membuat validasi email, sehingga nilai yang diinputkan harus berformat email, menggunakan karakter @

Kemudian buat file proses.php, sebagai tanda saja, jika semua form inputan sudah benar maka akan menampilkan file proses.php

Demikian tutorial kali ini, semoga bermanfaat, selamat mencoba... :D