Bagaimana Anda menambahkan pesan validasi di html?

Seperti kita ketahui bersama bahwa tidak ada keseragaman dalam bentuk pesan validasi elemen yang datang di browser yang berbeda. Untuk menyeragamkan pesan kesalahan ini, kita dapat mengatur pesan kesalahan khusus agar semua browser menampilkan pesan kesalahan yang sama

Solusi ini bukan bukti lengkap namun berfungsi di sebagian besar browser modern kecuali Internet Explorere 10

Pertama kami telah membuat formulir sederhana dengan kotak teks, email, dan kotak teks url

LoginName: *
Email:
Url:

Di atas semua elemen lain dan atributnya normal kecuali atribut data-error. Atribut dimulai dengan "data-" adalah jenis atribut khusus yang diperkenalkan dalam HTML 5 yang dapat digunakan untuk menyimpan data khusus elemen tersebut. Itu tidak ada artinya bagi browser. Ini hanya digunakan untuk pengembang untuk menyimpan beberapa data sementara

Dalam hal ini, kami menahan pesan kesalahan khusus kami ke dalam atribut data-error

Sekarang tulis kode jQuery berikut (Jangan lupa merujuk file jQuery ke halaman)

_

Dalam kode jQuery di atas kami melakukan hal berikut

• mendapatkan semua elemen input halaman menggunakan fungsi getElementsByTagNam dari JavaScript
• perulangan melalui semua dari mereka
• menyetel fungsi peristiwa yang tidak valid pada setiap elemen yang dijalankan hanya jika elemen tersebut ditandai sebagai tidak valid oleh browser
• menyetel customValidity menjadi kosong sehingga pesan kesalahan default browser disetel menjadi kosong
• setelah memeriksa apakah elemen itu tidak valid, atur customValidity-nya ke nilai atribut "data-error" elemen tertentu itu

KELUARAN

CATATAN

Jika atribut data-error tidak ditentukan untuk elemen tertentu, beberapa browser seperti Firefox mungkin menampilkan "null" jika elemen tersebut tidak valid (seperti dalam kasus ini, perhatikan bahwa kami tidak memiliki atribut data-error di kotak teks URL). Jadi disarankan untuk selalu mengatur atribut data-error ke setiap elemen tipe input

Formulir ada di mana-mana dalam aplikasi web. Beberapa aplikasi menggunakan formulir untuk mengumpulkan data guna mendaftarkan pengguna dan memberikan alamat email. Yang lain menggunakannya untuk memenuhi transaksi online untuk memfasilitasi pengalaman berbelanja

Anda mungkin menggunakan beberapa formulir web untuk mengajukan pinjaman mobil baru, sedangkan Anda akan menggunakan yang lain untuk memesan pizza untuk makan malam. Jadi, data yang dikumpulkan dari formulir tersebut harus dibersihkan, diformat dengan benar, dan bebas dari kode berbahaya apa pun. Proses ini disebut validasi formulir

Kami membutuhkan validasi formulir kapan pun kami menerima input pengguna. Kita harus memastikan bahwa data yang dimasukkan dalam format yang benar, berada dalam rentang data yang valid (seperti untuk kolom tanggal), dan tidak berisi kode berbahaya yang dapat menyebabkan injeksi SQL. Data yang salah atau hilang juga dapat menyebabkan API melontarkan kesalahan

Apa saja jenis validasi formulir yang berbeda?

Validasi formulir dapat terjadi di sisi klien dan sisi server

Validasi sisi klien terjadi menggunakan atribut HTML5 dan JavaScript sisi klien

Anda mungkin telah memperhatikan bahwa dalam beberapa formulir, segera setelah Anda memasukkan alamat email yang tidak valid, formulir tersebut memberikan kesalahan "Masukkan email yang valid". Jenis validasi langsung ini biasanya dilakukan melalui JavaScript sisi klien

Dalam kasus lain, Anda mungkin telah memperhatikan bahwa ketika Anda mengisi formulir dan memasukkan rincian seperti kartu kredit, itu mungkin menampilkan layar memuat dan kemudian menampilkan kesalahan "Kartu kredit ini tidak valid"

Di sini, formulir melakukan panggilan ke kode sisi servernya, dan mengembalikan kesalahan validasi setelah melakukan pemeriksaan kartu kredit tambahan. Kasus validasi di mana panggilan sisi server dilakukan disebut validasi sisi server

Data apa yang harus divalidasi?

Validasi formulir diperlukan setiap kali Anda menerima data dari pengguna. Ini mungkin termasuk

1. Memvalidasi format bidang seperti alamat email, nomor telepon, kode pos, nama, kata sandi
2. Memvalidasi bidang wajib
3. Memeriksa jenis data seperti string vs angka untuk bidang seperti nomor jaminan sosial
4. Memastikan bahwa nilai yang dimasukkan adalah nilai yang valid seperti negara, tanggal, dan sebagainya

Cara menyiapkan validasi sisi klien

Di sisi klien, validasi dapat dilakukan dengan dua cara

1. Menggunakan fungsionalitas HTML5
2. Menggunakan JavaScript

Cara menyiapkan validasi dengan fungsionalitas HTML5

HTML5 menyediakan banyak atribut untuk membantu memvalidasi data. Berikut adalah beberapa kasus validasi umum

• Membuat kolom wajib menggunakan required
• Membatasi panjang data
  • minlength, maxlength. untuk data teks
  • min dan <form id="form"> <label for="firstname"> First Name* </label> <input type="text" name="firstname" id="firstname" /> <button id="submit">Submit</button> <span role="alert" id="nameError" aria-hidden="true"> Please enter First Name </span> </form> 0 untuk nilai maksimum tipe num
• Membatasi jenis data menggunakan <form id="form"> <label for="firstname"> First Name* </label> <input type="text" name="firstname" id="firstname" /> <button id="submit">Submit</button> <span role="alert" id="nameError" aria-hidden="true"> Please enter First Name </span> </form> 1
  • <form id="form"> <label for="firstname"> First Name* </label> <input type="text" name="firstname" id="firstname" /> <button id="submit">Submit</button> <span role="alert" id="nameError" aria-hidden="true"> Please enter First Name </span> </form> 2
• Menentukan pola data menggunakan <form id="form"> <label for="firstname"> First Name* </label> <input type="text" name="firstname" id="firstname" /> <button id="submit">Submit</button> <span role="alert" id="nameError" aria-hidden="true"> Please enter First Name </span> </form> 3
  • menentukan pola regex yang harus dicocokkan dengan data formulir yang dimasukkan

Ketika nilai masukan cocok dengan validasi HTML5 di atas, ia diberi kelas semu <form id="form"> <label for="firstname"> First Name* </label> <input type="text" name="firstname" id="firstname" /> <button id="submit">Submit</button> <span role="alert" id="nameError" aria-hidden="true"> Please enter First Name </span> </form> 4, dan <form id="form"> <label for="firstname"> First Name* </label> <input type="text" name="firstname" id="firstname" /> <button id="submit">Submit</button> <span role="alert" id="nameError" aria-hidden="true"> Please enter First Name </span> </form> 5 jika tidak

Mari kita coba sebuah contoh

<form> <label for="firstname"> First Name: </label> <input type="text" name="firstname" id="firstname" required maxlength="45"> <label for="lastname"> Last Name: </label> <input type="text" name="lastname" id="lastname" required maxlength="45"> <button>Submit</button> </form> _

Tautan ke JSFiddle

Di sini kami memiliki dua bidang wajib - Nama Depan dan Nama Belakang. Coba contoh ini di JSFiddle. Jika Anda melewati salah satu bidang ini dan menekan kirim, Anda akan mendapat pesan, "Silakan isi bidang ini". Ini adalah validasi menggunakan HTML5 bawaan

Cara menyiapkan validasi menggunakan JavaScript

Saat menerapkan validasi formulir, ada beberapa hal yang perlu dipertimbangkan

1. Apa yang didefinisikan sebagai data "valid"?
2. Apa yang terjadi jika data yang dimasukkan tidak valid?

Anda dapat melakukan validasi JavaScript dengan dua cara

1. Validasi sebaris menggunakan JavaScript
2. API validasi Kendala HTML5

Validasi sebaris menggunakan JavaScript

<form id="form"> <label for="firstname"> First Name* </label> <input type="text" name="firstname" id="firstname" /> <button id="submit">Submit</button> <span role="alert" id="nameError" aria-hidden="true"> Please enter First Name </span> </form> const submit = document.getElementById("submit"); submit.addEventListener("click", validate); function validate(e) { e.preventDefault(); const firstNameField = document.getElementById("firstname"); let valid = true; if (!firstNameField.value) { const nameError = document.getElementById("nameError"); nameError.classList.add("visible"); firstNameField.classList.add("invalid"); nameError.setAttribute("aria-hidden", false); nameError.setAttribute("aria-invalid", true); } return valid; } #nameError { display: none; font-size: 0.8em; } #nameError.visible { display: block; } input.invalid { border-color: red; }

Tautan ke JSFiddle

Dalam contoh ini, kami memeriksa bidang wajib menggunakan JavaScript. Jika bidang wajib tidak ada, kami menggunakan CSS untuk menampilkan pesan kesalahan

Label Aria dimodifikasi sesuai untuk menandakan kesalahan. Dengan menggunakan CSS untuk menampilkan/menyembunyikan kesalahan, kami mengurangi jumlah manipulasi DOM yang perlu kami lakukan. Pesan kesalahan disediakan dalam konteks sehingga membuat pengalaman pengguna menjadi intuitif

API validasi Kendala HTML5

Atribut required dan <form id="form"> <label for="firstname"> First Name* </label> <input type="text" name="firstname" id="firstname" /> <button id="submit">Submit</button> <span role="alert" id="nameError" aria-hidden="true"> Please enter First Name </span> </form> 3 HTML dapat membantu melakukan validasi dasar. Namun jika Anda menginginkan validasi yang lebih kompleks atau ingin memberikan perpesanan kesalahan yang mendetail, Anda dapat menggunakan Constraint Validation API

Beberapa metode yang disediakan oleh API ini adalah

1. <form id="form"> <label for="firstname"> First Name* </label> <input type="text" name="firstname" id="firstname" /> <button id="submit">Submit</button> <span role="alert" id="nameError" aria-hidden="true"> Please enter First Name </span> </form> _8
2. <form id="form"> <label for="firstname"> First Name* </label> <input type="text" name="firstname" id="firstname" /> <button id="submit">Submit</button> <span role="alert" id="nameError" aria-hidden="true"> Please enter First Name </span> </form> _9
3. const submit = document.getElementById("submit"); submit.addEventListener("click", validate); function validate(e) { e.preventDefault(); const firstNameField = document.getElementById("firstname"); let valid = true; if (!firstNameField.value) { const nameError = document.getElementById("nameError"); nameError.classList.add("visible"); firstNameField.classList.add("invalid"); nameError.setAttribute("aria-hidden", false); nameError.setAttribute("aria-invalid", true); } return valid; } _0

Properti berikut ini berguna

1. const submit = document.getElementById("submit"); submit.addEventListener("click", validate); function validate(e) { e.preventDefault(); const firstNameField = document.getElementById("firstname"); let valid = true; if (!firstNameField.value) { const nameError = document.getElementById("nameError"); nameError.classList.add("visible"); firstNameField.classList.add("invalid"); nameError.setAttribute("aria-hidden", false); nameError.setAttribute("aria-invalid", true); } return valid; } _1
2. const submit = document.getElementById("submit"); submit.addEventListener("click", validate); function validate(e) { e.preventDefault(); const firstNameField = document.getElementById("firstname"); let valid = true; if (!firstNameField.value) { const nameError = document.getElementById("nameError"); nameError.classList.add("visible"); firstNameField.classList.add("invalid"); nameError.setAttribute("aria-hidden", false); nameError.setAttribute("aria-invalid", true); } return valid; } _2
3. const submit = document.getElementById("submit"); submit.addEventListener("click", validate); function validate(e) { e.preventDefault(); const firstNameField = document.getElementById("firstname"); let valid = true; if (!firstNameField.value) { const nameError = document.getElementById("nameError"); nameError.classList.add("visible"); firstNameField.classList.add("invalid"); nameError.setAttribute("aria-hidden", false); nameError.setAttribute("aria-invalid", true); } return valid; } _3

Dalam contoh ini, kami akan memvalidasi menggunakan metode inbuilt HTML5 seperti required dan const submit = document.getElementById("submit"); submit.addEventListener("click", validate); function validate(e) { e.preventDefault(); const firstNameField = document.getElementById("firstname"); let valid = true; if (!firstNameField.value) { const nameError = document.getElementById("nameError"); nameError.classList.add("visible"); firstNameField.classList.add("invalid"); nameError.setAttribute("aria-hidden", false); nameError.setAttribute("aria-invalid", true); } return valid; } 5 bersama dengan Constraint Validation API untuk memberikan pesan kesalahan terperinci

<form> <label for="firstname"> First Name: </label> <input type="text" name="firstname" required id="firstname"> <button>Submit</button> </form> const nameField = document.querySelector("input"); nameField.addEventListener("input", () => { nameField.setCustomValidity(""); nameField.checkValidity(); console.log(nameField.checkValidity()); }); nameField.addEventListener("invalid", () => { nameField.setCustomValidity("Please fill in your First Name."); });

Tautan ke JSFiddle

Jangan lupa validasi sisi server

Validasi sisi klien bukan satu-satunya pemeriksaan validasi yang harus Anda lakukan. Anda juga harus memvalidasi data yang diterima dari klien Anda pada kode sisi server untuk memastikan bahwa data sesuai dengan yang Anda harapkan

Anda juga dapat menggunakan validasi sisi server untuk melakukan verifikasi logika bisnis yang seharusnya tidak berada di sisi klien

Praktik terbaik Validasi Formulir

1. Selalu miliki validasi sisi server, karena aktor jahat dapat melewati validasi sisi klien
2. Sediakan pesan kesalahan mendetail dalam konteks dengan bidang yang menghasilkan kesalahan
3. Berikan contoh tampilan data jika terjadi pesan kesalahan, seperti - "Email tidak cocok dengan format - test@example. com"
4. Hindari menggunakan halaman kesalahan tunggal yang melibatkan pengalihan. Ini adalah pengalaman pengguna yang buruk dan memaksa pengguna untuk kembali ke halaman sebelumnya untuk memperbaiki formulir dan kehilangan konteks
5. Selalu tandai bidang yang wajib diisi

Tertarik dengan lebih banyak tutorial dan artikel seperti ini? . atau ikuti saya di Twitter

IKLAN

IKLAN

IKLAN

IKLAN

IKLAN

IKLAN

IKLAN

Shruti Kapoor

Baca lebih banyak posting

Jika Anda membaca sejauh ini, tweet ke penulis untuk menunjukkan bahwa Anda peduli. Tweet terima kasih

Belajar kode secara gratis. Kurikulum open source freeCodeCamp telah membantu lebih dari 40.000 orang mendapatkan pekerjaan sebagai pengembang. Memulai

Bagaimana Anda menulis validasi dalam HTML?

Bagaimana cara menampilkan pesan validasi dalam bentuk HTML?

Bagaimana cara mengatur pesan kesalahan dalam HTML?

Bagaimana cara menampilkan pesan validasi?