By Unknown • September 03, 2017 • 1 Comments Tutorial Membuat Form Validasi dengan Javascript Validasi yang kita buat di tutorial ini adalah form validasi pendaftaran sederhana.  1. Kita akan buat dulu sebuah form sederhana. yaitu form pendaftaran. dimana pada form ini terdapat form input nama, email dan alamat. 2. Buat sebuah file html atau php, dengan nama apa saja. Tapi pada tutorial ini akan membuat file php pada htdocs dengan nama file daftar.php. daftar.php <!DOCTYPE html> <html> <head> <title>Membuat Form Validasi dengan Javascript – Membuat Form Validasi</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <center><h2> Tutorial Membuat Form Validasi dengan Javascript </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> 3. Kemudian buat file dengan nama style.css. karena kita akan mendesign tampilan form pendaftaran ini. agar lebih terlihat menarik. style.css 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; } 4. Sekarang coba akses daftar.php yang sudah kita buat untuk melihat hasil form validasi pendaftaran dengan javascript. 5. Dan coba klik tombol daftar tanpa mengisi form. maka akan muncul pemberitahuan alert “Anda harus mengisi data dengan lengkap !“ 6. Dan pemberitahuan untuk mengisi form dengan lengkap pun berhasil di tampilkan. Referensi : http://www.malasngoding.com/membuat-form-validasi-dengan-javascript/ |
Cara menggunakan form javascript
Pos Terkait
Copyright © 2024 idkuu.com Inc.
