[PWEB-6] Validasi Form

Pada pertemuan keenam mata kuliah Pemrograman Web, kami  mendapat tugas untuk membuat validasi form menggunakan HTML dan JavaScript. Berikut adalah code yang digunakan beserta outputnya.

Source code: GitHub

Output:



HTML code:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <title>Belajar Form Validation</title>
  5.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  6.     <link rel="stylesheet" href="styles.css">
  7. </head>
  8. <body>
  9.     <div class="container-fluid d-flex align-items-center justify-content-center vh-100">
  10.         <div class="container">
  11.             <form name="formPendaftaran" action="daftar.php" method="post" onsubmit="return validateForm()">
  12.                 <div class="form-group">
  13.                     <label>Nama</label>
  14.                     <input type="text" name="nama" placeholder="Nama lengkap" class="form-control" required maxlength="40" minlength="3">
  15.                 </div>
  16.                 <div class="form-group">
  17.                     <label>Email</label>
  18.                     <input type="email" name="email" placeholder="Email Aktif" class="form-control">
  19.                     <small id="emailHelp" class="form-text text-muted">Email Akan Digunakan Untuk Mengirimkan Notifikasi.</small>
  20.                 </div>
  21.                 <div class="form-group">
  22.                     <label>Jurusan</label>
  23.                     <select name="jurusan" class="form-control">
  24.                             <option value="0">Pilih Jurusan</option>
  25.                             <option value="1">Jurusan Informatika</option>
  26.                             <option value="2">Jurusan Teknik Komputer Jaringan</option>
  27.                             <option value="3">Jurusan Multimedia</option>
  28.                         </select>
  29.                 </div>
  30.                 <button type="submit" class="btn btn-primary">Submit</button>
  31.             </form>
  32.         </div>
  33.     </div>
  34.  
  35.     <script>
  36.         function validateForm() {
  37.             if (document.forms["formPendaftaran"]["nama"].value == "") {
  38.                 alert("Nama Tidak Boleh Kosong");
  39.                 document.forms["formPendaftaran"]["nama"].focus();
  40.                 return false;
  41.             }
  42.             if (document.forms["formPendaftaran"]["email"].value == "") {
  43.                 alert("Email Tidak Boleh Kosong");
  44.                 document.forms["formPendaftaran"]["email"].focus();
  45.                 return false;
  46.             }
  47.             if (document.forms["formPendaftaran"]["jurusan"].selectedIndex < 1) {
  48.                 alert("Pilih Jurusan.");
  49.                 document.forms["formPendaftaran"]["jurusan"].focus();
  50.                 return false;
  51.             }
  52.         }
  53.     </script>
  54. </body>
  55. </html>

CSS code:

  1. /* styles.css */
  2. body {
  3.     background-image: url('pic.jpg'); /* Replace 'path-to-your-image.jpg' with the actual path or URL of your image */
  4.     background-size: cover; /* Ensures the image covers the entire background */
  5.     background-repeat: no-repeat; /* Prevents the image from repeating */
  6.     background-attachment: fixed; /* Keeps the image fixed while scrolling */
  7.     background-position: center center; /* Centers the image horizontally and vertically */
  8. }
  9.  
  10. .container {
  11.     max-width: 400px;
  12.     padding: 20px;
  13.     background-color: rgba(255, 255, 255, 0.8); /* Add a semi-transparent white background to the form container */
  14.     border-radius: 5px;
  15.     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  16. }
  17.  
  18. .container-fluid {
  19.     height: 100%;
  20.     display: flex;
  21.     flex-direction: column;
  22.     justify-content: center;
  23.     align-items: center;
  24. }
  25.  
  26.  
  27. .form-group {
  28.     margin-bottom: 15px;
  29. }
  30.  
  31. label {
  32.     font-weight: bold;
  33. }
  34.  
  35. input[type="text"],
  36. input[type="email"],
  37. select {
  38.     width: 100%;
  39.     padding: 10px;
  40.     border: 1px solid #ccc;
  41.     border-radius: 4px;
  42.     font-size: 16px;
  43. }
  44.  
  45. select {
  46.     height: 40px;
  47. }
  48.  
  49. small.form-text {
  50.     color: #888;
  51. }
  52.  
  53. .btn-primary {
  54.     background-color: #007bff;
  55.     border: none;
  56.     padding: 10px 20px;
  57.     color: #fff;
  58.     border-radius: 4px;
  59.     cursor: pointer;
  60. }
  61.  
  62. .btn-primary:hover {
  63.     background-color: #0056b3;
  64. }
  65.  


Reference:

https://belajarphp.net/tutorial-validasi-form-menggunakan-html-dan-javascript/


Komentar

Posting Komentar

Postingan Populer