EAS MPPL 2021 Pada kesempatan ini kelompok kami akan menjelaskan salah satu produk perangkat lunak milik Zoho yaitu Zoho Marketing Automation yang dikerjakan secara berkelompok yang beranggotakan: Ricky Supriyanto 05111940000036 Arvel Gavrilla R 05111940000040 M Arif Faizin 05111940000060 Zulfiqar Fauzul Akbar 05111940000101 Raihan Alifianto 05111940000213 Dengan hasil sebagai berikut 1. Deskripsi Produk 2. Manajemen Ruang Lingkup 3. Manajemen Waktu 4. Manajemen Biaya 5. Manajemen Resiko 6. Video demo
Pada postingan ini, saya akan menjelaskan cara membuat Validasi Form menggunakan JQuery Validate.
Sebelum melakukan validasi form, hubungkan kode yang ada menggunakan library dari JQuery Validate yang ada di link berikut
Buat sebuah file index.html sebagai halaman utama ketika mengakses website.
Isikan kode berikut pada index.html
index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Mencoba JQuery</title> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" | |
| integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" | |
| crossorigin="anonymous" referrerpolicy="no-referrer"></script> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" | |
| integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/additional-methods.min.js"></script> | |
| </head> | |
| <body> | |
| <section class="container py-4 flex-column min-vh-100 d-flex align-items-center justify-content-center"> | |
| <form id="inputMhs" class="w-100"> | |
| <fieldset> | |
| <h1 class="mb-4">Input Data Mahasiswa</h1> | |
| <p> | |
| <label for="nrp">NRP</label> | |
| <input id="nrp" name="nrp" type="text" class="form-control" placeholder="minimal 10 digit"> | |
| </p> | |
| <p> | |
| <label for="nama">Nama</label> | |
| <input id="nama" name="nama" type="text" class="form-control" placeholder="masukkan nama lengkap"> | |
| </p> | |
| <p> | |
| <label for="alamat">Alamat</label> | |
| <textarea id="alamat" name="alamat" class="form-control">Masukkan alamat lengkap</textarea> | |
| </p> | |
| <p> | |
| <label for="tgllahir">Tanggal Lahir</label> | |
| <input id="tgllahir" name="tgllahir" type="text" class="form-control" placeholder="yyyy-mm-dd"> | |
| </p> | |
| <p> | |
| <label for="umur">Umur</label> | |
| <input id="umur" name="umur" type="number" class="form-control" placeholder="masukkan umur"> | |
| </p> | |
| <p> | |
| <label for="email">Alamat Email</label> | |
| <input id="email" name="email" type="email" class="form-control" placeholder="masukkan email valid"> | |
| </p> | |
| <p> | |
| <label for="situs">Alamat Situs</label> | |
| <input id="situs" name="situs" type="url" class="form-control" placeholder="masukkan situs valid"> | |
| </p> | |
| <p> | |
| <label for="password">Password</label> | |
| <input id="password" name="password" type="password" class="form-control" | |
| placeholder="masukkan password minimal 8 karakter"> | |
| </p> | |
| <p> | |
| <label for="ulangipassword">Ulangi Password</label> | |
| <input id="ulangipassword" name="ulangipassword" type="password" class="form-control" | |
| placeholder="masukkan password sekali lagi"> | |
| </p> | |
| <p> | |
| <input class="submit btn btn-primary" type="submit" value="Submit"> | |
| </p> | |
| </fieldset> | |
| </form> | |
| </section> | |
| <script> | |
| $(document).ready(function () { | |
| jQuery.validator.setDefaults({ | |
| debug: true, | |
| success: "valid" | |
| }); | |
| $("#inputMhs").validate({ | |
| rules: { | |
| nrp: { | |
| required: true, | |
| digits: true, | |
| minlength: 10, | |
| }, | |
| nama: { | |
| required: true, | |
| }, | |
| alamat: { | |
| required: true, | |
| }, | |
| tgllahir: { | |
| required: true, | |
| dateISO: true, | |
| }, | |
| umur: { | |
| required: true, | |
| digits: true, | |
| }, | |
| email: { | |
| required: true, | |
| email: true, | |
| }, | |
| situs: { | |
| required: true, | |
| url: true, | |
| }, | |
| password: { | |
| required: true, | |
| minlength: 8, | |
| }, | |
| ulangipassword: { | |
| required: true, | |
| minlength: 8, | |
| equalTo: "#password", | |
| }, | |
| }, | |
| messages: { | |
| nrp: { | |
| required: "Kolom NRP perlu diisi", | |
| digits: "Masukkan digit saja", | |
| minlength: jQuery.validator.format("Masukkan minimal {0} angka") | |
| }, | |
| nama: { | |
| required: "Kolom Nama perlu diisi", | |
| }, | |
| alamat: { | |
| required: "Kolom Alamat perlu diisi", | |
| }, | |
| tgllahir: { | |
| required: "Kolom Tanggal Lahir perlu diisi", | |
| dateISO: "Masukkan format yang sesuai (yyyy-mm-dd)", | |
| }, | |
| umur: { | |
| required: "Kolom Umur perlu diisi", | |
| digits: "Masukkan digit saja", | |
| }, | |
| email: { | |
| required: "Kolom Email perlu diisi", | |
| email: "Masukkan email yang valid", | |
| }, | |
| situs: { | |
| required: "Kolom Situs perlu diisi", | |
| url: "Masukkan situs yang valid", | |
| }, | |
| password: { | |
| required: "Kolom Password perlu diisi", | |
| minlength: jQuery.validator.format("Masukkan minimal {0} karakter"), | |
| }, | |
| ulangipassword: { | |
| required: "Kolom Ulangi Password perlu diisi", | |
| minlength: jQuery.validator.format("Masukkan minimal {0} karakter"), | |
| equalTo: "Ulangi Password dengan benar" | |
| }, | |
| }, | |
| }) | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Berikut adalah demo dari validation formnya
Sekian postingan kali ini, terima kasih.
Comments
Post a Comment