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 tentang bagaimana membuat validasi dalam form menggunakan Javascript.
Berikut adalah link live website terebut Link
Sebelumnya, kode ini menggunakan Framework Bootstrap untuk mempercepat pembuatan tampilan website. Dalam website ini, ada beberapa kolom yang harus divalidasi, sebagai berikut :
- Nama, harus diisi
- NRP, harus diisi, harus memiliki panjang antara 10-14 karakter, dan semuanya merupakan angka
- Kota Domisili, harus diisi
- Jurusan, harus diisi
- Email, harus diisi, harus berformat seperti email
- Status Vaksin, harus diisi
- Persetujuan, harus diisi
Langsung saja, untuk kode index.html nya adalah sebagai berikut
This file contains hidden or 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>Validasi Form menggunakan JavaScript</title> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" | |
| integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> | |
| <script src="/index.js"></script> | |
| </head> | |
| <body> | |
| <section class="container p-4 flex-column min-vh-100 d-flex align-items-center justify-content-center"> | |
| <h1>Formulir Persetujuan Kuliah Tatap Muka</h1> | |
| <form id="tatapmuka" class="w-100" style="max-width: 50rem;" name="tatapmuka" onsubmit="return validateForm();"> | |
| <div class="row"> | |
| <div class="col-md-6"> | |
| <div class="mb-3"> | |
| <label for="inputName" class="form-label">Nama</label> | |
| <input type="text" class="form-control" id="inputName" required> | |
| </div> | |
| </div> | |
| <div class="col-md-6"> | |
| <div class="mb-3"> | |
| <label for="inputNRP" class="form-label">NRP</label> | |
| <input type="text" class="form-control" id="inputNRP" required minlength="10" maxlength="14"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-md-6"> | |
| <div class="mb-3"> | |
| <label for="inputDomisili" class="form-label">Kota Domisili</label> | |
| <input type="text" class="form-control" id="inputDomisili" required> | |
| </div> | |
| </div> | |
| <div class="col-md-6"> | |
| <div class="mb-3"> | |
| <label for="inputJurusan" class="form-label">Jurusan</label> | |
| <input type="text" class="form-control" id="inputJurusan" required> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-md-6"> | |
| <div class="mb-3"> | |
| <label for="inputEmail" class="form-label">Email</label> | |
| <input type="email" class="form-control" id="inputEmail" required> | |
| </div> | |
| </div> | |
| <div class="col-md-6"> | |
| <div class="mb-3"> | |
| <label for="selectVaksin" class="form-label">Status Vaksin</label> | |
| <select class="form-select" aria-label="Select Vaksin" id="selectVaksin" required> | |
| <option selected disabled>pilih salah satu</option> | |
| <option value="1">Belum Vaksin</option> | |
| <option value="2">Sudah Vaksin Dosis Ke-1</option> | |
| <option value="3">Sudah Vaksin Dosis Ke-2</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col"> | |
| <div class="mb-3"> | |
| <label for="selectSetuju" class="form-label">Dengan ini saya menyatakan setuju mengikuti | |
| kegiatan tatap muka</label> | |
| <select class="form-select" aria-label="Select Setuju" id="selectSetuju" required> | |
| <option selected disabled>pilih salah satu</option> | |
| <option value="1">Setuju</option> | |
| <option value="2">Tidak Setuju</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <button id="btnSubmit" type="submit" class="btn btn-primary">Submit</button> | |
| </form> | |
| </section> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" | |
| integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" | |
| crossorigin="anonymous"></script> | |
| </body> | |
| </html> |
Kemudian fungsi javascript dijelaskan sebagai berikut
This file contains hidden or 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
| const btnSubmit = document.getElementById("btnSubmit"); | |
| const inputName = document.getElementById("inputName"); | |
| const inputNRP = document.getElementById("inputNRP"); | |
| const inputDomisili = document.getElementById("inputDomisili"); | |
| const inputJurusan = document.getElementById("inputJurusan"); | |
| const inputEmail = document.getElementById("inputEmail"); | |
| const selectVaksin = document.getElementById("selectVaksin"); | |
| const selectSetuju = document.getElementById("selectSetuju"); | |
| function isArrayOfNumber(string) { | |
| let length = string.length; | |
| for (let i = 0; i < length; i++) { | |
| if (isNaN(parseInt(string[i]))) { | |
| return false; | |
| } | |
| } | |
| return true; | |
| } | |
| function validateForm() { | |
| if (inputName.length = 0) { | |
| window.alert("Kolom Nama masih kosong!"); | |
| return false; | |
| } | |
| if (inputNRP.length = 0) { | |
| window.alert("Kolom NRP masih kosong!"); | |
| return false; | |
| } else if (isArrayOfNumber(inputNRP.value) === false) { | |
| window.alert("Kolom NRP tidak valid!"); | |
| return false; | |
| } | |
| if (inputDomisili.length = 0) { | |
| window.alert("Kolom Domisili masih kosong!"); | |
| return false; | |
| } | |
| if (inputJurusan.length = 0) { | |
| window.alert("Kolom Jurusan masih kosong!"); | |
| return false; | |
| } | |
| if (inputEmail.length = 0) { | |
| window.alert("Kolom Email masih kosong!"); | |
| return false; | |
| } | |
| if (selectVaksin.selectedIndex < 1) { | |
| window.alert("Kolom Status Vaksin masih belum diisi!"); | |
| return false; | |
| } | |
| if (selectSetuju.selectedIndex < 1) { | |
| window.alert("Kolom Persetujuan masih belum diisi!"); | |
| return false; | |
| } | |
| return true; | |
| } |
Berikut tampilan ketika ada kolom yang tidak terisi
Berikut tampilan ketika kolom NRP tidak memenuhi 10-14 karakter
Berikut tampilan ketika kolom NRP tidak valid
Berikut tampilan ketika kolom Email tidak berformat email
Comments
Post a Comment