Membuat Form Validasi dengan Javascript
Membuat Form Validasi dengan Javascript – Sebelumnya di www.malasngoding.com, saya sudah membuat tutorial cara membuat form validasi dengan PHP. dan juga sudah membuat form validasi dengan menggunakan JQuery. tapi di tutorial ini kita akan belajar bagaimana cara paling mudah membuat form validasi dengan javascript.
Di tutorial ini akan di jelaskan dengan sejelas-jelasnya cara membuat form validasi dengan javascript. dengan cepat dan sangat mudah.
Membuat Form Validasi dengan Javascript
Untuk teman-teman yang belum membaca tutorial form validasi lainnya di www.malasngoding.com silahkan baca tutorial berikut ini.
Oke yuk langsung simak apa saja yang kita butuhkan untuk membuat form validasi dengan javascript. silahkan teman-teman ikuti panduan dan penjelasan berikut ini untuk membuat validasi pada form dengan mudah.
validasi yang kita buat di tutorial ini adalah form validasi pendaftaran sederhana. dimana nantinya teman-teman bisa mengembangkan nya lagi sesuai dengan kebutuhan aplikasi yang akan teman-teman ingin buat.
Membuat Form Validasi dengan Javascript
Pertama kali yang paling penting. kita akan buat dulu sebuah form sederhana. yaitu form pendaftaran. dimana pada form ini terdapat form input nama, email dan alamat.
buat sebuah file html atau php, dengan nama apa saja bebas terserah teman-teman. tapi pada tutorial ini saya akan membuat file php pada htdocs dengan nama file daftar.php(silahkan sesuaikan dengan keinginan).
daftar.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<!DOCTYPE html> <html> <head> <title>Membuat Form Validasi dengan Javascript - WWW.MALASNGODING.COM</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <center><h2>WWW.MALASNGODING.COM</h2></center> <div class="login"> <form action="#" method="POST" onSubmit="validasi()"> <div> <label>Nama Lengkap:</label> <input type="text" name="nama" id="nama" /> </div> <div> <label>Email:</label> <input type="email" name="email" id="email" /> </div> <div> <label>Alamat:</label> <textarea cols="40" rows="5" name="alamat" id="alamat"></textarea> </div> <div> <input type="submit" value="Daftar" class="tombol"> </div> </form> </div> </body> <script type="text/javascript"> function validasi() { var nama = document.getElementById("nama").value; var email = document.getElementById("email").value; var alamat = document.getElementById("alamat").value; if (nama != "" && email!="" && alamat !="") { return true; }else{ alert('Anda harus mengisi data dengan lengkap !'); } } </script> </html> |
kemudian buat file dengan nama style.css. karena kita akan mendesign tampilan form pendaftaran ini. agar lebih terlihat menarik.
silahkan teman-teman baca juga tutorial CSS di www.malasngoding.com.
style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
body { background: #3498db; font-family: sans-serif; } h2 { color: #fff; } .login { padding: 1em; margin: 2em auto; width: 17em; background: #fff; border-radius: 3px; } label { font-size: 10pt; color: #555; } input[type="text"], input[type="email"], textarea { padding: 8px; width: 95%; background: #efefef; border: 0; font-size: 10pt; margin: 6px 0px; } .tombol { background: #3498db; color: #fff; border: 0; padding: 5px 8px; } |
sekarang coba akses daftar.php yang sudah kita buat untuk melihat hasil form validasi pendaftaran dengan javascript.
membuat form validasi dengan javascript
dan coba klik tombol daftar tanpa mengisi form. maka akan muncul pemberitahuan alert “Anda harus mengisi data dengan lengkap !“.
membuat validasi form pendaftaran dengan javascript
Dan pemberitahuan untuk mengisi form dengan lengkap pun berhasil di tampilkan.
Penjelasan
nah. coba teman-teman perhatikan pada form pendaftaran yang sudah kita buat.
Di sini kita memerintahkan untuk menjalankan function validasi() saat form di submit. onSubmit=”validasi()”.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<form action="#" method="POST" onSubmit="validasi()"> <div> <label>Nama Lengkap:</label> <input type="text" name="nama" id="nama" /> </div> <div> <label>Email:</label> <input type="email" name="email" id="email" /> </div> <div> <label>Alamat:</label> <textarea cols="40" rows="5" name="alamat" id="alamat"></textarea> </div> <div> <input type="submit" value="Daftar" class="tombol"> </div> </form> |
yang mana function validasi sudah kita buat untuk mengecek inputan.
|
1 2 3 4 5 6 7 8 9 10 |
function validasi() { var nama = document.getElementById("nama").value; var email = document.getElementById("email").value; var alamat = document.getElementById("alamat").value; if (nama != "" && email!="" && alamat !="") { return true; }else{ alert('Anda harus mengisi data dengan lengkap !'); } } |
kita menangkap nilai value dari form input. dan memasukkannya ke dalam variabel.
|
1 2 3 |
var nama = document.getElementById("nama").value; var email = document.getElementById("email").value; var alamat = document.getElementById("alamat").value; |
dan kemudian mengecek masing-masing variabel.
|
1 2 3 4 5 |
if (nama != "" && email!="" && alamat !="") { return true; }else{ alert('Anda harus mengisi data dengan lengkap !'); } |
jika nama, email dan alamat di isi. atau tidak kosong. maka akan di kembalikan nilai TRUE pada form agar dapat di teruskan. jika tidak maka tampilkan pesan alert yang menampilkan “Anda harus mengisi data dengan lengkap !”.
Oke sekian tutorial Membuat Form Validasi dengan Javascript. semoga dapat bermanfaat.
Tutorial Menarik Lainnya
Fungsi Terbilang Dengan JavaScript
Membuat Show Hide Password Di HTML
Menghitung Jumlah Kata Menggunakan Javascript
Menghitung Jumlah Karakter di Javascript
[…] Baca juga : Tutorial Membuat Form Validasi Dengan Javascript […]
terima kasih atas ilmu yang bermanfaat
nyatuinnya gmn bang sama yang form CSS? saya kok berantakan ya hasil kodingannya?