Widget HTML #1

Beranda / CSS / HTML / JavaScript

Langkah Mudah Membuat Form OTP Interaktif Menggunakan Bootstrap 5 dan jQuery

Posting Komentar

 


Halo teman-teman pada artikel ini saya akan membagikan cara bagaimana membuat form otp dimana terdapat 6 kotak yang akan menampung setiap digit otp yang terkirim ke pengguna, teman-teman juga bisa melihat demonya disini ya

Apa Itu OTP?

OTP (One-Time Password) adalah kode atau kata sandi yang hanya berlaku untuk satu sesi atau transaksi aja nih teman-teman. OTP biasa digunakan sebagai lapisan keamanan tambahan untuk verifikasi identitas pengguna, umumnya dalam proses otentikasi dua faktor (2FA). OTP biasanya dikirimkan melalui SMS, email, atau aplikasi otentikasi, dan pengguna harus memasukkan kode tersebut ke dalam aplikasi atau situs web untuk mengonfirmasi identitasnya.

Ciri-ciri OTP:

  1. Sekali Pakai: OTP hanya bisa digunakan sekali. Jika telah digunakan, maka kode tersebut tidak dapat digunakan lagi.
  2. Berlaku dalam Waktu Singkat: OTP biasanya memiliki waktu kadaluarsa yang singkat, misalnya 1-5 menit, untuk menjaga keamanannya.
  3. Dinamis: Kode OTP berbeda setiap kali pengguna melakukan login atau transaksi baru.

OTP pada umumnya juga digunakan untuk meningkatkan keamanan, terutama di aplikasi perbankan, e-commerce, atau layanan digital lainnya, sebagai perlindungan dari akses tidak sah.

Setelah teman-teman tahu apa itu OTP yuk selanjutnya langsung saja kita buat form otpnya

Struktur HTML

Langkah pertama yang akan kita lakukan adalah membuat formnya dahulu dengan html disini saya mengguankan bootstrap 5.3 untuk styling nya seperti dibawah ini 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>OTP Form</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <div class="container mt-5">
    <div class="row justify-content-center">
      <div class="col-md-6">
        <h3 class="text-center">Enter OTP</h3>
        <form id="otp-form" class="d-flex justify-content-center">
          <input type="text" class="form-control otp-input" maxlength="1" id="otp1" autofocus inputmode="numeric" pattern="[0-9]*">
          <input type="text" class="form-control otp-input" maxlength="1" id="otp2" inputmode="numeric" pattern="[0-9]*">
          <input type="text" class="form-control otp-input" maxlength="1" id="otp3" inputmode="numeric" pattern="[0-9]*">
          <input type="text" class="form-control otp-input" maxlength="1" id="otp4" inputmode="numeric" pattern="[0-9]*">
          <input type="text" class="form-control otp-input" maxlength="1" id="otp5" inputmode="numeric" pattern="[0-9]*">
          <input type="text" class="form-control otp-input" maxlength="1" id="otp6" inputmode="numeric" pattern="[0-9]*">
        </form>
        <div class="text-center mt-4">
          <button type="submit" class="btn btn-primary" id="submit-otp">Submit</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Bootstrap 5 JS and jQuery -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  <script src="script.js"></script>

</body>

</html>

Bisa kita lihat di atas pada form saya membuat 6 input seperti di bawah ini, dimana pada setiap inputan saya mengatur type dengan text dan mengatur inputmode menjadi numeric dan mengatur pattern menjadi [0-9] dimana ini berfungsi untuk mengatur input agar hanya menerima inputan angka dari 0-9 saja. Selanjutnya saya juga mengatur disetiap input dengan maxlength dengan 1 dimana ini berfungsi agar setiap form hanya bisa diisi dengan satu digit angka saja. dan terakhir pada input yang pertama saya menambah atribut autofocus yang berfungsi agar pada saat page di load pertama maka form pertama akan langsung aktif. 

<input type="text" class="form-control otp-input" maxlength="1" id="otp1" autofocus inputmode="numeric" pattern="[0-9]*">
          <input type="text" class="form-control otp-input" maxlength="1" id="otp2" inputmode="numeric" pattern="[0-9]*">
          <input type="text" class="form-control otp-input" maxlength="1" id="otp3" inputmode="numeric" pattern="[0-9]*">
          <input type="text" class="form-control otp-input" maxlength="1" id="otp4" inputmode="numeric" pattern="[0-9]*">
          <input type="text" class="form-control otp-input" maxlength="1" id="otp5" inputmode="numeric" pattern="[0-9]*">
          <input type="text" class="form-control otp-input" maxlength="1" id="otp6" inputmode="numeric" pattern="[0-9]*">

Dapat dilihat pada form saya mengatur dengan class d-flex justify-content-center yang berfungsi untuk mengatur form agar berjajar secara horizontal dan berada di posisi tengah seperti pada gambar dibawah ini

Struktur CSS

Selanjutnya meskipun kita sudah menggunakan bootstrap untuk styling-nya kita perlu menambahkan sedikit css sendiri untuk merapikan ukuran dari setiap kotak inputan dari gambar diatas, berikut kode css nya 

.otp-input {
  width: 50px;
  height: 50px;
  font-size: 2rem;
  text-align: center;
  margin-right: 10px;
}

Dapat teman-teman lihat pada kode css diatas kita mengatur tampilan setiap kotak inputan yang sebelumnya sudah kita kasih class otp-input dengan beberapa pengaturan antara lain kita mengatur tinggi dan lebar setiap kotak (width dan Height) menjadi 50px yang akan membuat kotaknya menjadi persegi, selanjutnya kita mengatur ukuran font dengan font-size: 2rem dan kemudian kita mengatur agar setiap angka yang kita inputkan dikotak berada ditengah kotak dengan cara mengatur text-align: center; terakhir kita akan memberi jarak setiap kotak menjadi 10px pada margin-rightnya

Struktur Javascript: Membuat Form Menjadi Interaktif

Setelah selesai membuat formnya, selanjutnya kita akan membuat form ini menjadi ingteraktif dengan javascript dimana pada saat kotak pertama terisi maka akan langsung pindah kekotak selanjutnya, berikut javascript nya 

$(document).ready(function() {
  // Fungsi untuk berpindah antar input
  $(".otp-input").on("keyup", function(e) {
    var input = $(this);
    var value = input.val();
    var nextInput = input.next(".otp-input");
    var prevInput = input.prev(".otp-input");

    // Pastikan hanya angka yang dapat dimasukkan
    if (!/^\d$/.test(value)) {
      input.val('');
      return;
    }

    if (value.length === 1 && nextInput.length) {
      nextInput.focus();
    }

    // Arrow key navigation
    if (e.key === "ArrowRight" && nextInput.length) {
      nextInput.focus();
    } else if (e.key === "ArrowLeft" && prevInput.length) {
      prevInput.focus();
    }

    // Pindah ke input sebelumnya jika Backspace ditekan
    if (e.key === "Backspace" && prevInput.length) {
      prevInput.focus();
    }
  });
});

Bisa kita lihat pada kode diatas kita akan membuat fungsi on (event listener) yang akan aktif kketika ada event pengetikan di class .otp-form seperti dibawah ini 

$(".otp-input").on("keyup", function(e) {
...
}

Selanjutnya kita akan membuat 2 variabel yang akan menampung elemen kotak sebelah kanan dari kotak yang sedang aktif dan kotak sebelahkirinya jika ada, seperti pada kode di bawah ini 

var nextInput = input.next(".otp-input");
var prevInput = input.prev(".otp-input");

Selanjutnya kita akan membuat fungsi untuk memastikan yang diinput pada kotak adalah angka dimana jika yang diinput merupakan selain angka maka kita akan menghapus nilainya dan membuat kotaknya menjadi kosong, untuk melakukannya kita perlu menggunakan regex dan memastikan bahwa yang diinput merupakan angka

if (!/^\d$/.test(value)) {
      input.val('');
      return;
}

setelah kita lakukan validasi pada kotak maka selanjutnya jika yang diinputkan merupakan angka atau bersifat valid maka selanjutnya kita akan membuat fungsi untuk memindahkan kursor ke kotak selanjutnya dengan kode di bawah ini

if (value.length === 1 && nextInput.length) {
      nextInput.focus();
}

selanjutnya kita akan membuat fungsi navigasi dengan arrowkey dimana jika arrowkey key kiri atau kanan ditekan maka kursor akan berpindah kekotak sesuai dengan arah arrowkey yang ditekan seperti di bawah ini 

if (e.key === "ArrowRight" && nextInput.length) {
    nextInput.focus();
} else if (e.key === "ArrowLeft" && prevInput.length) {
    prevInput.focus();
}

Setelah itu kita akan membuat fungsi untuk memindahkan kursor kekotak sebelumnya jika dilakukan penghapusan dengan button backspace berikut kodenya

if (e.key === "Backspace" && prevInput.length) {
    prevInput.focus();
}

Struktur Javascript: Menyatukan Semua Nilai

Setelah kita membuat formnya menjadi interaktif dengan membuat beberapa fungsi seperti form validasi yang hanya akan menerima inputan angka, berpindah ke kotak selanjutnya jika sudah mengisi sebuah kotak, membuat kursor bisa digerakan dengan arrowkey di keyboard dan terakhir memindahkan kursor ke kotak sebelumnya jika dilakukan penghapusan dengan button backspace, selanjutnya kita akan membuat fungsi untuk menyatukan semua nilai pada seluruh kotak atau yang bisa dibilang fungsi yang akan menghandle form submit

Untuk melakukannya kita akan membuat fungsi event listener yang akan dieksekusi saat form disubmit dan melakukan pencegahan page reload untuk selanjutnya dilakukan perulangan untuk mengambil semua nilai disetiap kotak menjadi sebuah variabel, berikut kode untuk melakukannya yang akan kita letakan setelah fungsi yang menghandle backspace

$('#submit-otp').click(function(e) {
e.preventDefault();
let otp = '';
$('.otp-input').each(function() {
      otp += $(this).val();
});
    alert('OTP entered: ' + otp) 
});
Source Code Full

Kesimpulan

Untuk membuat form otp yang interaktif seperti ini kita perlu membuat beberapa fungsi yang berguna untuk mengendalikan kursor baik pada saat mengisi kotak maupun pada saat user menekan backspace dan arrowkey, tidak hanya itu kita juga perlu membuat fungsi yang berguna untuk menyatukan semua inputan dari setiap kotak yang kemudian bisa kita gunakan untuk memvalidasimya di backend.

Posting Komentar untuk "Langkah Mudah Membuat Form OTP Interaktif Menggunakan Bootstrap 5 dan jQuery"

Posting Komentar