Bagaimana Menerapkan Validasi Formulir Sisi Klien Dengan JavaScript

JavaScript adalah salah satu bahasa pemrograman paling populer dan serbaguna yang dapat Anda mulai hari ini. Bahasa pemrograman ini dikatakan sebagai bahasa web dan sangat penting untuk menambahkan interaktivitas ke situs web Anda.

Elemen formulir adalah salah satu elemen HTML yang paling banyak digunakan di situs web. Formulir ini mengambil input dari pengguna dan memprosesnya di browser atau server. Namun, penting untuk memvalidasi input ini untuk mengatasi masalah keamanan dan bug yang tidak diinginkan.

Memahami Manipulasi DOM

Sebelum kita melanjutkan untuk menerapkan validasi formulir sisi klien dengan JavaScript, penting untuk memahami Model Objek Dokumen, umumnya dikenal sebagai 'DOM'. DOM adalah API standar yang memungkinkan JavaScript untuk berinteraksi dengan elemen pada halaman web HTML.

Pelajari Lebih Lanjut: Pahlawan Tersembunyi Situs Web: Memahami DOM

Untuk menambahkan event listener dan mengambil input pengguna, Anda harus memahami dasar-dasar manipulasi DOM. Berikut adalah contoh yang menjelaskan bagaimana Anda dapat mengubah konten halaman web menggunakan DOM API dan JavaScript:

  
  
  
  
  
  
 Document  
  
  
  
  
  
 const paragraph = document.getElementById('parapgraph');  
 paragraph.innerText = 'This is a paragraph tag';

Dalam kode di atas,

tag memiliki id gugus kalimat . Saat menulis kode JavaScript, Anda dapat mengakses elemen ini dengan memanggil document.getElementById('paragraf') metode dan memanipulasi nilainya.

Sekarang setelah Anda memahami dasar-dasar manipulasi DOM, mari kita lanjutkan dan terapkan validasi formulir.

Validasi Formulir Dengan JavaScript

Ada berbagai jenis input yang dapat Anda ambil dari pengguna. Jenis teks, jenis email, jenis kata sandi, tombol radio, dan kotak centang adalah beberapa yang paling umum yang mungkin Anda temui. Karena sebagian besar jenis input ini, Anda perlu menggunakan logika yang berbeda untuk memvalidasi masing-masing.

Sebelum mempelajari validasi, mari luangkan waktu sejenak untuk memahami formulir HTML dan pentingnya mereka. Formulir HTML adalah salah satu cara utama Anda berinteraksi dengan situs web karena memungkinkan Anda memasukkan data, menerapkan perubahan, memanggil pop-up, mengirimkan informasi ke server, dan banyak lagi.

cara menonton video youtube yang dibatasi usia

HTML elemen digunakan untuk membuat formulir yang menghadap pengguna ini. Inilah cara Anda dapat memvalidasi input dari formulir HTML:

1. Validasi Email

Baik Anda sedang membangun sistem otentikasi atau hanya mengumpulkan email pengguna untuk buletin Anda, penting untuk memvalidasi email sebelum Anda dapat menyimpannya di database atau memprosesnya. Untuk memeriksa apakah email memenuhi semua persyaratan yang diperlukan, Anda dapat menggunakan a ekspresi reguler .

HTML:

JavaScript:

const emailInput = document.getElementById('email');  
const emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/;  
if (!emailInput.value.match(emailRegex)) {  
 alert('Invalid email address.');  
}

2. Validasi Kata Sandi

Kata sandi adalah bagian penting dari data yang membutuhkan jenis validasi khusus untuk memastikan keamanannya. Pertimbangkan formulir pendaftaran yang memiliki dua bidang: kata sandi dan konfirmasi kata sandi. Untuk memvalidasi pasangan input ini, berikut adalah beberapa hal yang perlu Anda pertimbangkan:

Kata sandi harus lebih dari 6 karakter.
Nilai kata sandi dan bidang konfirmasi kata sandi harus sama.

HTML:

JavaScript:

const password = document.getElementById('password').value;  
const confirmPassword = document.getElementById('confirm-password').value;  
if (password.value !== confirmPassword.value) {  
 alert('Entered passwords do not match');  
}  
if (password.length <6) {  
 alert('Password must be more than 6 characters long')  
}

3. Validasi Masukan Radio

Input radio HTML adalah jenis elemen kontrol grafis khusus yang memungkinkan pengguna untuk memilih hanya satu dari serangkaian opsi eksklusif yang telah ditentukan sebelumnya. Kasus penggunaan yang umum dari input semacam itu adalah untuk memilih jenis kelamin. Untuk memvalidasi input tersebut, Anda perlu memeriksa apakah setidaknya salah satunya dipilih.

Hal ini dapat dicapai dengan menggunakan operator logika seperti DAN ( && ) dan tidak ( ! ) operator dengan cara ini:

HTML:

Male  
  
Female  
  
Others

JavaScript:

const genders = document.getElementsByName('gender');  
const validForm = false;  
let i = 0;  
while (!validForm && i  if (radios[i].checked) validForm = true;  
 i++;  
}  
if (!validForm) alert('Must check some option!');

4. Pilih Validasi Masukan

NS Elemen HTML digunakan untuk membuat daftar drop-down. NS tag di dalam elemen menentukan opsi yang tersedia di daftar drop-down. Masing-masing tag memiliki atribut nilai yang terkait dengannya.

cara meminta nomor gadis di fb

Untuk opsi default atau awal, Anda dapat mengatur nilainya menjadi string kosong sehingga dianggap sebagai opsi yang tidak valid. Untuk semua opsi lainnya, tetapkan atribut nilai yang sesuai. Berikut adalah contoh bagaimana Anda dapat memvalidasi a elemen masukan:

HTML:

  
 Select One  
 Mr  
 Mrs  
 Ms

JavaScript:

saluran tv online gratis dari seluruh dunia

const title = document.getElementById('title');  
if (title.value = '') {  
 alert('Please select a title');  
}

5. Validasi Kotak Centang

Elemen input dari kotak centang tipe dirender secara default sebagai kotak yang dicentang atau dicentang saat diaktifkan. Kotak centang memungkinkan Anda memilih nilai tunggal untuk dikirimkan dalam formulir. Kotak centang adalah pilihan populer untuk input 'terima syarat dan ketentuan'.

Untuk mengetahui apakah checkbox dicentang atau tidak, Anda dapat mengakses atribut yang dicentang pada input checkbox. Berikut ini contohnya:

HTML:

  
I agree to the terms and conditions

JavaScript:

const terms = document.getElementById('terms');  
if (!terms.checked) {  
 alert('Please agree to the terms and conditions to proceed further.');  
}

Mencegah lebih baik daripada mengobati

Selalu disarankan untuk memvalidasi semua masukan yang Anda terima dari pengunjung untuk memberikan pengalaman yang aman dan terjamin. Peretas selalu mencoba memasukkan data berbahaya ke bidang input untuk melakukan serangan skrip lintas situs dan injeksi SQL.

Sekarang setelah Anda memahami cara memvalidasi input HTML Anda, mengapa tidak mencobanya dengan membuat formulir dan menerapkan strategi yang telah Anda lihat di atas?

Membagikan Membagikan Menciak Surel Cara Membuat Formulir di HTML

Izinkan pengguna Anda memasukkan data di situs web Anda dengan formulir HTML.

Baca Selanjutnya Topik-topik yang berkaitan

Pemrograman
HTML
JavaScript
Pengembangan web
Tutorial Pengkodean

Tentang Penulis Nitin Ranganath(31 Artikel Diterbitkan)

Nitin adalah pengembang perangkat lunak yang rajin dan mahasiswa teknik komputer yang mengembangkan aplikasi web menggunakan teknologi JavaScript. Dia bekerja sebagai pengembang web lepas dan suka menulis untuk Linux dan Pemrograman di waktu luangnya.

Berlangganan newsletter kami

Bergabunglah dengan buletin kami untuk kiat teknologi, ulasan, ebook gratis, dan penawaran eksklusif!

Klik di sini untuk berlangganan