Advertisement
raffi_pratama

Untitled

Oct 12th, 2021
158
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 4.40 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <title>Form Validation</title>
  6.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  7. </head>
  8.  
  9. <body>
  10.     <div class="container my-5 ">
  11.         <div class="card" style="background-color:rgb(189, 255, 255);">
  12.             <div class="text-center my-3 border-bottom">
  13.                 <h1>Form Validasi Vaksinasi</h1>
  14.                 <h4>Mohon isikan form berikut dengan benar</h4>
  15.             </div>
  16.             <div class="card-body px-5 pt-3">
  17.                 <div class="container">
  18.                     <form name="formPendaftaran" action="daftar.php" method="post" onsubmit="return validateForm()">
  19.                         <div class="form-group">
  20.                             <label>Nama</label>
  21.                             <input type="text" name="nama" placeholder="Nama lengkap" class="form-control" required
  22.                                maxlength="40" minlength="3">
  23.                         </div>
  24.                         <div class="form-group">
  25.                             <label>NRP</label>
  26.                             <input type="text" name="nrp" placeholder="nrp" class="form-control" required maxlength="40"
  27.                                minlength="3">
  28.                         </div>
  29.                         <div class="form-group">
  30.                             <label>Email</label>
  31.                             <input type="email" name="email" placeholder="Email Aktif" class="form-control">
  32.                             <small id="emailHelp" class="form-text text-muted">Email Akan Digunakan Untuk
  33.                                 Mengirimkan
  34.                                 Notifikasi.</small>
  35.                         </div>
  36.                         <div class="form-group">
  37.                             <label>Vaksin</label>
  38.                             <select name="vaksin" class="form-control">
  39.                                 <option value="0">Pilih Status Vaksin</option>
  40.                                 <option value="1">Belum Vaksin</option>
  41.                                 <option value="2">Vaksin Tahap 1</option>
  42.                                 <option value="3">Vaksin Tahap 2</option>
  43.                             </select>
  44.                         </div>
  45.                         <div class="form-group">
  46.                             <label>Jurusan</label>
  47.                             <select name="jurusan" class="form-control">
  48.                                 <option value="0">Pilih Jurusan</option>
  49.                                 <option value="1">Jurusan Informatika</option>
  50.                                 <option value="2">Jurusan Teknik Komputer Jaringan</option>
  51.                                 <option value="3">Jurusan Multimedia</option>
  52.                             </select>
  53.                         </div>
  54.                         <button type="submit" class="btn btn-primary">Submit</button>
  55.                     </form>
  56.                 </div>
  57.             </div>
  58.             <div class="card-footer text-center">
  59.                 <h5>Raffi Pratama PWEB B 2021</h5>
  60.             </div>
  61.         </div>
  62.  
  63.     </div>
  64.     <script>
  65.         function validateForm() {
  66.             if (document.forms["formPendaftaran"]["nama"].value == "") {
  67.                 alert("Nama Tidak Boleh Kosong");
  68.                 document.forms["formPendaftaran"]["nama"].focus();
  69.                 return false;
  70.             }
  71.             if (document.forms["formPendaftaran"]["nrp"].value == "") {
  72.                 alert("NRP Tidak Boleh Kosong");
  73.                 document.forms["formPendaftaran"]["nrp"].focus();
  74.                 return false;
  75.             }
  76.             if (document.forms["formPendaftaran"]["email"].value == "") {
  77.                 alert("Email Tidak Boleh Kosong");
  78.                 document.forms["formPendaftaran"]["email"].focus();
  79.                 return false;
  80.             }
  81.             if (document.forms["formPendaftaran"]["vaksin"].selectedIndex < 1) {
  82.                alert("Pilih Riwayat Vaksin");
  83.                document.forms["formPendaftaran"]["vaksin"].focus();
  84.                return false;
  85.            }
  86.            if (document.forms["formPendaftaran"]["jurusan"].selectedIndex < 1) {
  87.                alert("Pilih Jurusan.");
  88.                document.forms["formPendaftaran"]["jurusan"].focus();
  89.                return false;
  90.            }
  91.        }
  92.  
  93.    </script>
  94. </body>
  95.  
  96. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement