Minggu, 03 September 2017

Tutorial Membuat Form Validasi dengan Javascript

By Berbagi Ilmu • 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/

1 komentar:

  1. Unknown28 Maret 2020 pukul 10.58

    Terimakasih kak atas artikelnya,sangat bermanfaat sekali. saya jadi bisa mudah memahami dan mempelajari cara bagaimana membuat validasi JavaSript pada form HTML. tetap selalu berkarya kak dan sukses selalu, ditunggu artikel-artikel terbaru selanjutnya perkenalkan nama saya Sintia dan Nim saya 1922500186 dan link Web kampus saya https://www.atmaluhur.ac.id/

    BalasHapus