API tools faq
paste
farfnd

form.html

farfnd
Dec 10th, 2021 (edited)
77
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 7.12 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  6.   <meta charset="utf-8">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1">
  8.   <title>Tugas 8.2 JQuery - Validasi Form</title>
  9.  
  10.   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
  11.    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  12.   <link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet" />
  13.  
  14.   <link rel="stylesheet" href="style.css">
  15. </head>
  16.  
  17. <body>
  18.   <main class="validasi-form">
  19.     <header>
  20.       <nav class="navbar navbar-expand-md fixed-top navbar-dark" style="background-color: #013880;">
  21.         <div class="container-fluid">
  22.           <a class="navbar-brand" href="https://farfnd.github.io">
  23.             <img src="https://farfnd.github.io/assets/images/FAnewgrey.png" alt="" width="50"
  24.              class="d-inline-block align-text-middle">
  25.           </a>
  26.           <a class="navbar-brand" href=".">
  27.             Tugas 8 - JQuery
  28.           </a>
  29.           <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse"
  30.            aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
  31.             <span class="navbar-toggler-icon"></span>
  32.           </button>
  33.           <div class="collapse navbar-collapse" id="navbarCollapse">
  34.             <ul class="navbar-nav me-auto mb-2 mb-md-0">
  35.               <li class="nav-item">
  36.                 <a class="nav-link" href=".">Daftar Buku & Animasi</a>
  37.              </li>
  38.              <li class="nav-item">
  39.                <a class="nav-link active" href="form.html">Validasi Form</a>
  40.              </li>
  41.            </ul>
  42.          </div>
  43.        </div>
  44.      </nav>
  45.    </header>
  46.  
  47.    <div class="row mb-4">
  48.      <div class="col-sm-12">
  49.        <div class="card p-3">
  50.          <div class="card-body">
  51.            <h4 class="card-title text-center pb-3">Input Data Mahasiswa</h4>
  52.            <form id="form-mhs">
  53.              <div class="mb-3">
  54.                <label for="nama" class="form-label">Nama Lengkap</label>
  55.                <input type="text" class="form-control required" name="nama" id="nama" required>
  56.              </div>
  57.              <div class="row mb-3">
  58.                <div class="col-md-6">
  59.                  <label for="nrp" class="form-label">NRP</label>
  60.                  <input type="text" class="form-control" name="nrp" id="nrp" required>
  61.                </div>
  62.                <div class="col-md-6">
  63.                  <label for="tanggalLahir" class="form-label">Tanggal Lahir</label>
  64.                  <input type="date" class="form-control" name="tanggalLahir" id="tanggalLahir" required>
  65.                </div>
  66.              </div>
  67.              <div class="mb-3">
  68.                <label for="alamat" class="form-label">Alamat</label>
  69.                <textarea class="form-control" name="alamat" id="alamat" rows="3" required></textarea>
  70.              </div>
  71.              <div class="mb-3">
  72.                <label for="email" class="form-label">Alamat Email</label>
  73.                <input type="email" class="form-control" name="email" id="email" required>
  74.              </div>
  75.              <div class="mb-3">
  76.                <label for="situs" class="form-label">Situs Web (opsional)</label>
  77.                <input type="text" class="form-control" name="situs" id="situs">
  78.              </div>
  79.              <div class="mb-3">
  80.                <label for="password" class="form-label">Password</label>
  81.                <input type="password" class="form-control" name="password" id="password" required>
  82.              </div>
  83.              <div class="mb-3">
  84.                <label for="passwordConfirm" class="form-label">Konfirmasi Password</label>
  85.                <input type="password" class="form-control" name="passwordConfirm" id="passwordConfirm" required>
  86.              </div>
  87.              <input class="btn btn-primary w-100 btn-block submit" type="submit" name="Submit" value="Submit">
  88.            </form>
  89.          </div>
  90.        </div>
  91.      </div>
  92.    </div>
  93.  </main>
  94.  
  95.  <footer class="text-muted">
  96.    <div class="container">
  97.      <p class="text-dark">
  98.        &copy; <a href="https://farfnd.github.io" style="text-decoration: none;">FA</a> 2021
  99.       </p>
  100.     </div>
  101.   </footer>
  102.  
  103.   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
  104.    integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
  105.    crossorigin="anonymous"></script>
  106.   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
  107.    integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
  108.    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  109.   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.all.min.js"></script>
  110.   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"
  111.    integrity="sha512-37T7leoNS06R80c8Ulq7cdCDU5MNQBwlYoy1TX/WUsLFC2eYNqtKlV0QjH7r8JpG/S0GUMZwebnVFLPd6SU5yg=="
  112.    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  113.  
  114.   <script>
  115.     $(document).ready(function() {
  116.       $('#form-mhs').validate({
  117.         rules: {
  118.           nama: {
  119.             minlength: 2
  120.           },
  121.           nrp: {
  122.             digits: true,
  123.             minlength: 10,
  124.             maxlength: 14
  125.           },
  126.           email: {
  127.             email: true
  128.           },
  129.           situs: {
  130.             url: true
  131.           },
  132.           passwordConfirm: {
  133.             equalTo: "#password"
  134.           }
  135.         },
  136.         messages: {
  137.           nama: {
  138.             required: "Nama harus diisi",
  139.             minlength: "Nama harus terdiri dari minimal 2 karakter",
  140.           },
  141.           nrp: {
  142.             required: "NRP harus diisi",
  143.             digits: "NRP harus berupa angka",
  144.             minlength: "NRP harus terdiri dari minimal 10 digit",
  145.             maxlength: "NRP harus terdiri dari maksimal 14 digit"
  146.           },
  147.           tanggalLahir: {
  148.             required: "Tanggal lahir harus diisi"
  149.           },
  150.           alamat: {
  151.             required: "Alamat harus diisi"
  152.           },
  153.           email: {
  154.             required: "Alamat email harus diisi",
  155.             email: "Format email tidak valid"
  156.           },
  157.           situs: {
  158.             url: "Format situs web tidak valid"
  159.           },
  160.           password: {
  161.             required: "Password harus diisi"
  162.           },
  163.           passwordConfirm: {
  164.             required: "Password konfirmasi harus diisi",
  165.             equalTo: "Password konfirmasi tidak cocok"
  166.           }
  167.         },
  168.         submitHandler: function() {
  169.           Swal.fire({
  170.             icon: 'success',
  171.             title: 'Input data berhasil',
  172.             text: 'Data berhasil divalidasi',
  173.             heightAuto: false
  174.           })
  175.           $('#form-mhs')[0].reset();
  176.         }
  177.       });
  178.     });
  179.   </script>
  180. </body>
  181.  
  182. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!