JavaScript Form: Cara Membuat dan Sintak Codenya

Section Artikel

1 Validasi Form di JavaScript
2 JavaScript Dapat Memvalidasi Input Numerik
3 Validasi Form HTML Otomatis
4 Validasi data
5 Validasi Batasan HTML
6 Atribut Input HTML Validasi Batasan
7 Validasi Batasan CSS Pseudo Selector

Validasi Form di JavaScript

Validasi form di HTML dapat dilakukan dengan JavaScript.

Jika form field (fname) kosong, fungsi ini akan memberitahu pesan, dan mengembalikan nilai false, untuk mencegah form dikirimkan.

function validateForm() {
  var x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("Name must be filled out");
    return false;
  }
}

Fungsi tersebut dapat dipanggil saat form dikirimkan.

Contoh Form HTML

<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
  var x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("Nama harus diisi");
    return false;
  }
}
</script>
</head>
<body>

<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
  Name: <input type="text" name="fname">
  <input type="submit" value="Submit">
</form>

</body>
</html>

JavaScript Dapat Memvalidasi Input Numerik

JavaScript sering digunakan untuk memvalidasi input numerik.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Can Validate Input</h2>

<p>Input angka 1 sampai 10:</p>

<input id="numb">

<button type="button" onclick="myFunction()">Kirim</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x, text;

  // Get the value of the input field with id="numb"
  x = document.getElementById("numb").value;

  // If x is Not a Number or less than one or greater than 10
  if (isNaN(x) || x < 1 || x > 10) {
    text = "Input not valid";
  } else {
    text = "Input OK";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html>

Validasi Form HTML Otomatis

Validasi Form HTML Otomatis dapat dilakukan secara otomatis oleh browser.

Jika field form (fname) kosong, atribut required wajib mencegah form ini dikirim.

Contoh:

<!DOCTYPE html>
<html>
<body>

<form action="/action_page.php" method="post">
  <input type="text" name="fname" required>
  <input type="submit" value="Kirim">
</form>

<p>Jika Anda mengklik kirim, tanpa mengisi kolom teks,
browser Anda akan menampilkan pesan kesalahan.</p>

</body>
</html>

Validasi form HTML otomatis tidak berfungsi di Internet Explorer 9 atau versi yang lebih lama.

Validasi data

Validasi data adalah proses untuk memastikan bahwa masukan pengguna bersih, benar, dan berguna.

Tugas validasi tipikal adalah, memastikan:

sudahkah pengguna mengisi semua field yang dibutuhkan?
apakah pengguna sudah memasukkan tanggal yang valid?
sudahkah pengguna memasukkan teks di bidang numerik?
Paling sering, tujuan validasi data adalah untuk memastikan input pengguna yang benar.

Validasi dapat ditentukan dengan berbagai metode, dan diterapkan dengan berbagai cara.

Validasi sisi server dilakukan oleh web server, setelah input dikirim ke server.

Validasi sisi klien dilakukan oleh web browser, sebelum input dikirim ke web server.

Validasi Batasan HTML

HTML5 memperkenalkan konsep validasi HTML baru yang disebut validasi batasan.

Validasi Batasan HTML didasarkan pada:

Atribut Input HTML validasi batasan
Validasi Batasan CSS Pseudo Selectors
Validasi Batasan Properti dan Metode DOM

Atribut Input HTML Validasi Batasan

Atribut	Deskripsi
disabled	Menentukan bahwa elemen input harus dinonaktifkan
max	Menentukan nilai maksimum dari sebuah elemen masukan
min	Menentukan nilai minimum dari sebuah elemen masukan
pattern	Menentukan pola nilai dari sebuah elemen masukan
required	Menentukan bahwa kolom input membutuhkan sebuah elemen
type	Menentukan jenis elemen masukan

Validasi Batasan CSS Pseudo Selector

Selector	Deskripsi
:disabled	Memilih elemen masukan dengan atribut “nonaktif” yang ditentukan
:invalid	Memilih elemen masukan dengan nilai yang tidak valid
:optional	Memilih elemen masukan tanpa atribut “wajib” yang ditentukan
:required	Memilih elemen masukan dengan atribut “diperlukan” yang ditentukan
:valid	Memilih elemen masukan dengan nilai yang valid

form javascript