Bagikan melalui

Validasi Input

  • Artikel

Dalam skema versi 1.3 dan yang lebih baru, AdaptiveCards mendukung validasi input sisi klien dari jenis Input.

Properti Validasi

Properti berikut ini didukung untuk validasi di AdaptiveCards:

Input Properti
Input.ChoiceSet isRequired
Input.Date isRequired
min
max
Input.Number isRequired
min
max
Input.Text isRequired
regex
maxLength
Input.Time isRequired
min
max
Input.Toggle isRequired

Properti errorMessage tersedia di semua jenis input untuk menentukan kesalahan apa yang harus ditampilkan pengguna jika mereka memasukkan nilai yang tidak valid.

Catatan

Properti min dan maks (termasuk maxLength) pada beberapa platform dapat diberlakukan langsung oleh kontrol. Misalnya, properti min pada Input.Date dapat diberlakukan dengan tidak mengizinkan pengguna untuk memilih tanggal sebelum minimum dalam pemilih tanggal. Dalam hal ini, pesan kesalahan mungkin tidak ditampilkan.

Label

Properti lain yang ditambahkan dalam skema versi 1.3 untuk semua elemen input adalah label properti string. label Menggunakan properti adalah cara yang disarankan untuk menandai input dalam Kartu Adaptif, vis-à-vis placeholder properti. Ini adalah cara sederhana dan ringkas untuk melabeli input untuk penulis kartu dan memiliki manfaat berikut:

  • Indikator validasi: seperti disebutkan di atas input sekarang dapat ditandai sebagaimana diperlukan, label untuk input yang diperlukan akan memiliki indikator visual di sampingnya. Indikator visual ini didefinisikan dalam HostConfig dan secara default dirender sebagai tanda bintang *.
  • Aksesibilitas: dengan memiliki koneksi antara label dan input, pustaka perender dapat mengatur properti yang diperlukan untuk memungkinkan pengguna menggunakan teknologi bantuan (pembaca layar) untuk dapat berinteraksi dengan benar dengan input di dalam kartu adaptif.
    • Label vs Tempat Penampung: seperti yang dijelaskan Katie Sherwin dalam artikel Tempat Penampung dalam bidang formulir berbahaya menggunakan tempat penampung memiliki banyak konsekuensi negatif seperti mengganggu memori jangka pendek pengguna, sehingga lebih sulit bagi pengguna untuk memverifikasi input mereka sebelum mengirimkan, memberikan kesulitan bagi pengguna untuk membacanya karena, biasanya, teks tempat penampung memiliki kontras warna yang buruk terhadap latar belakangnya atau pembaca layar tidak membaca teks tempat penampung sama sekali, hanya untuk beberapa nama.
    • TextBlock dan RichTextBlock: saat menggunakan elemen kartu lain sebagai label mungkin tampak sebagai solusi yang baik, ini menyajikan masalah tidak dapat menegakkan kedekatan antara input dan label, di sisi lain dengan menggunakan label properti , kita dapat memastikan bahwa kedua elemen visual dirender berdekatan yang membantu pengguna yang membutuhkan kaca pembesar layar.

Bidang yang akan divalidasi dan dikirimkan

Input akan divalidasi saat pengguna mengklik tindakan Action.Submit di kartu. Input yang akan divalidasi dan dikirimkan untuk tindakan Action.Submit tertentu adalah:

  • Input pada kartu yang sama dengan Action.Submit
  • Input pada kartu induk apa pun yang berisi Action.Submit dalam kasus kartu di bawah Action.ShowCard

Jika input tersebut lulus validasi, nilai di bidangnya akan diteruskan kembali ke klien. Jika tidak lulus validasi, pesan kesalahan untuk input yang tidak valid akan ditampilkan, dan pengiriman tidak akan dikirim.

Catatan

Input tidak akan divalidasi atau dikirimkan jika ada di kartu yang merupakan kartu anak atau saudara kandung dari kartu yang berisi Action.Submit. Ini termasuk kartu dari Action.ShowCards di ActionSets di isi kartu tersebut. Ini adalah perubahan perilaku dari versi perender sebelum 2.0, dan berlaku untuk kartu semua versi skema, terlepas dari apakah properti validasi input digunakan.

Pertimbangan Lain dan Masalah yang Diketahui

  • Tidak disarankan untuk membuat input dengan properti validasi yang mungkin tidak selalu terlihat karena interaksi dengan Action.ToggleVisibility. Pesan kesalahan dan indikasi visual bahwa input tidak valid tidak akan ditampilkan jika input saat ini tidak terlihat, yang dapat menyebabkan kebingungan bagi pengguna mengapa pengiriman mereka diblokir.

  • Perilaku validasi input untuk host yang menggunakan kartu show popup menggunakan "actions":"showCard":"actionMode":"popup" nilai dalam konfigurasi host mereka tidak ditentukan dengan baik. Kartu peragaan popup mungkin tidak digunakan lagi dalam rilis mendatang.