javascriptoo – Menambahkan validasi ke formulir HTML Anda akan memastikan bahwa pengguna Anda memasukkan data dengan benar dalam format yang benar. Di masa lalu, memvalidasi input formulir memerlukan penggunaan plugin JavaScript, namun saat ini, sebagian besar browser memiliki solusi bawaan yang dapat menangani sebagian besar validasi.

Cara Termudah Untuk Menambahkan Validasi Formulir
Source : tutorialzine

Dalam tutorial ini, kami akan menunjukkan kepada Anda cara Menambahkan Aturan Validasi Ke Formulir hanya menggunakan atribut input HTML asli.

Untuk mendemonstrasikan proses pembuatan aturan validasi, kami telah menyiapkan formulir pendaftaran HTML sederhana menggunakan Bootstrap 4. Anda dapat mengklik gambar di bawah ini untuk membuka demo langsung.

Source : tutorialzine

Layout

HTML

Desain kami mencakup formulir Bootstrap dengan beberapa bidang masukan dan tombol Kirim. Dalam contoh ini, kami menggunakan 3 jenis input field-input teks, input kata sandi dan input email.

<div class="registration-form">
    <form>
        <h3 class="text-center">Create your account</h3>
        <div class="form-group">
            <input class="form-control item" type="text" name="username" maxlength="15" minlength="4" pattern="^[a-zA-Z0-9_.-]*$" id="username" placeholder="Username" required>
        </div>
        <div class="form-group">
            <input class="form-control item" type="password" name="password" minlength="6" id="password" placeholder="Password" required>
        </div>
        <div class="form-group">
            <input class="form-control item" type="email" name="email" id="email" placeholder="Email" required>
        </div>
        <div class="form-group">
            <button class="btn btn-primary btn-block create-account" type="submit">Create Account</button>
        </div>
    </form>
</div>

CSS

Kami juga menambahkan beberapa gaya CSS dasar untuk membuat formulir terlihat lebih mudah.

html {
  background-color:#214c84;
  background-blend-mode:overlay;
  display:flex;
  align-items:center;
  justify-content:center;
  background-image:url(../../assets/img/image4.jpg);
  background-repeat:no-repeat;
  background-size:cover;
  height:100%;
}

body {
  background-color:transparent;
}

.registration-form {
  padding:50px 0;
}

.registration-form form {
  max-width:800px;
  padding:50px 70px;
  border-radius:10px;
  box-shadow:4px 4px 15px rgba(0, 0, 0, 0.2);
  background-color:#fff;
}

.registration-form form h3 {
  font-weight:bold;
  margin-bottom:30px;
}

.registration-form .item {
  border-radius:10px;
  margin-bottom:25px;
  padding:10px 20px;
}

.registration-form .create-account {
  border-radius:30px;
  padding:10px 20px;
  font-size:18px;
  font-weight:bold;
  background-color:#3f93ff;
  border:none;
  color:white;
  margin-top:20px;
}

@media (max-width: 576px) {
  .registration-form form {
    padding:50px 20px;
  }
}

Jenis Autentikasi

HTML5 menggunakan atribut masukan untuk memberikan metode yang baik dan nyaman untuk verifikasi sebaris. Ada banyak properti yang tersedia, dan kami hanya akan memperkenalkan beberapa properti yang paling umum. Untuk daftar lengkapnya, Anda dapat mengunjungi panduan MDN yang luar biasa ini.

Baca Juga : Pelajari TypeScript Dalam 30 Menit

Atribut ini menetapkan bahwa kolom input tidak boleh kosong. Ini mengharuskan pengguna untuk memasukkan sesuatu sebelum mengirimkan formulir.

 <input class="form-control item" type="email" name="email" id="email" placeholder="Email" required>

Maxlength Dan Minlength

Menentukan jumlah minimum maksimum simbol yang dapat dimasukkan pengguna di kolom input. Ini sangat berguna di bidang kata sandi di mana kata sandi yang lebih panjang berarti kata sandi yang lebih aman.

<input class="form-control item" type="password" name="password" minlength="6" id="password" placeholder="Password" required>

Pola

Menentukan ekspresi reguler yang harus dicocokkan agar data yang dimasukkan lewat. Ini dapat digunakan dengan jenis input berikut: teks, pencarian, url, email, dan kata sandi. Jika Anda tidak terbiasa dengan ekspresi reguler, Anda dapat melihat tutorial kami Mempelajari Ekspresi Reguler dalam 20 Menit.

<input class="form-control item" type="text" name="username" maxlength="15" minlength="4" pattern="^[a-zA-Z0-9_.-]*$" id="username" placeholder="Username" required>

Validasi Formulir Di Bootstrap Studio

Bootstrap Studio menawarkan cara cepat dan mudah untuk memvalidasi formulir Anda tanpa harus menulis satu baris kode pun. Aplikasi ini memiliki kontrol bawaan yang memungkinkan Anda dengan cepat menyiapkan semua aturan validasi yang mungkin Anda perlukan.

Untuk tutorial lebih rinci tentang cara membuat validasi formulir dalam proyek Anda, kunjungi situs web Bootstrap Studio.

Kesimpulan

Anda bisa mendapatkan kode sumber lengkap untuk tutorial ini, dari tombol Unduh di dekat bagian atas halaman. Anda bebas menyesuaikan dan menggunakannya di semua proyek Anda, untuk penggunaan komersial atau pribadi, tidak diperlukan atribusi (lisensi kami).