Buat Pengunjung Web Anda terkesan dengan Validasi Formulir waktu nyata

formulir online

Kesan pertama yang biasanya Anda miliki sebagai pengguna Aplikasi Web adalah saat Anda mengisi formulir web. Saya kagum dengan jumlah formulir web di luar sana yang tidak memiliki validasi atau yang menunggu Anda mengirimkan konten formulir Anda sebelum memberi tahu Anda masalah apa yang mungkin Anda miliki.

Aturan praktis saya adalah bahwa apa pun yang tidak divalidasi didukung. Apa pun yang dapat divalidasi sebelum mengirimkan formulir harus. Dengan munculnya Ajax, Anda bahkan dapat memvalidasi data terhadap database Anda sebelum dikirim. Jangan memilih rute malas – pengguna menghargai bantuannya!

Berikut adalah beberapa contoh:

  1. Email Addresses – Saya tidak keberatan dengan formulir yang mengharuskan Anda mengisi alamat email dua kali untuk memvalidasinya, tetapi fakta bahwa formulir tersebut tidak memberi tahu Anda apakah cocok atau dibuat dengan benar tidak dapat dimaafkan.
  2. password – Jika Anda akan membuat saya mengetikkan kata sandi dua kali, harap validasikan bahwa nilainya sama sebelum memposting formulir.
  3. kekuatan kata sandi – Jika Anda memerlukan kekuatan kata sandi tertentu (kombinasi karakter alfanumerik atau huruf besar), berikan beberapa umpan balik untuk saya saat saya mengetik kata sandi. Jangan menunggu saya mengirimkannya sebelum memberi tahu saya bahwa itu gagal.
  4. Tanggal – Jika Anda ingin tanggal dalam format am/d/yyyy, izinkan saya memasukkan informasi dalam satu bidang dengan mengetikkan nilai-nilai itu dan memformatnya dengan benar. Jika Anda ingin angka nol di depan, masukkan setelahnya. Tidak apa-apa untuk menampilkan satu format dan menyimpan yang lain di database Anda.
  5. Tanggal hari ini - Isi untukku! Mengapa Anda meminta saya untuk mengisi tanggal ketika Anda sudah mengetahuinya ?!
  6. Format tanggal – Jika Anda memiliki aplikasi internasional, Anda dapat default format tanggal berdasarkan Internasionalisasi aplikasi Anda. Tentu saja, ada baiknya memiliki opsi bagi pengguna untuk mengesampingkan opsi itu dan memilihnya sendiri.
  7. Nomor Jaminan Sosial – cukup sederhana untuk menambahkan beberapa javascript yang secara otomatis melompat dari satu bidang ke bidang lainnya atau secara terprogram menempatkan tanda hubung di antara nilai-nilai.
  8. Nomor telepon – mempertimbangkan Internasionalisasi, jenis bidang ini juga dapat disederhanakan dengan memformat nomor telepon di antarmuka, tetapi menyimpannya dalam format lain yang efisien untuk back-end Anda. Jangan membuat pengguna Anda mengetikkan tanda kurung, spasi, dan tanda hubung.
  9. Panjang Teks Maksimum – jika Anda membatasi jumlah karakter yang disimpan dalam database Anda, maka JANGAN biarkan saya mengetik karakter sebanyak itu! Bahkan tidak memerlukan validasi yang sulit… itu hanya pengaturan pada kotak teks.
  10. Panjang Teks Minimum - jika Anda memerlukan panjang teks minimum, maka bunyikan alarm sampai saya memiliki cukup karakter.

Berikut adalah contoh fungsi Kekuatan Kata Sandi dari Kebijaksanaan Geek:

Ketik kata sandi:

UPDATE: 10/26/2007 - Saya menemukan sumber yang rapi dengan pustaka JavaScript yang tersedia untuk diunduh validasi formulir, disebut LiveValidation.

16 Komentar

  1. 1

    Saya setuju bahwa itu adalah fitur hebat untuk formulir, tetapi mengatakan bahwa "tidak dapat dimaafkan" untuk tidak melakukan validasi javascript front end lebih merupakan opini pribadi. Saya suka bekerja di javascript, dan telah menulis beberapa editmasks yang cukup rapi untuk melakukan beberapa hal yang Anda bicarakan, tetapi banyak di antaranya jauh dari sepele, dan banyak paket validasi bentuk javascript di luar sana memiliki sejumlah lubang besar. Tidak semua orang akan menginvestasikan waktu untuk menduplikasi validasi back end mereka dengan (lebih sering daripada tidak) validasi javascript front end yang lebih kompleks.

    Poin bagus, tapi jelas bukan sesuatu yang "dibutuhkan" setiap formulir online menurut pendapat saya.

  2. 2

    Pemeriksa kata sandi relatif rusak. Kata sandi apa pun cukup bagus jika panjang.

    Contoh:

    Apakah ini benar-benar kata sandi yang biasa-biasa saja?

    f46dffe6ff4ffgdfgfjfgyu656hfdt74tyhdtu5674yfgh6uhhye45herdhrt64684hythdfth54y54348fgdcvzse8cn984v3p4m6vq98476m3wuw89ewfucsd8fg67s4v8tw76u340m6tver7nt+s89346vs+0em9u+s+09hrtuhss586ysvne4896vb4865tbv089rt++

  3. 4

    Bagi saya, validasi formulir terbaik adalah ketika Anda memberikan kesan validasi sisi klien kepada pengguna sementara itu validasi sisi AJAX / Server.
    Anda hanya perlu melampirkan ke elemen formulir Anda beberapa penanganan peristiwa (keyup, blur, klik, dll ...) yang memposting seluruh formulir melalui AJAX ke server, menjalankan fungsi "check" yang mengembalikan pesan kesalahan yang sesuai (passowrd ini juga sederhana, tanggal tersebut dalam format yang salah, dll…)
    Ketika pengguna akhirnya memposting formulir dengan mengklik tombol kirim, Anda masih dapat menggunakan fungsi sisi server "periksa" untuk memvalidasi formulir terakhir kali sebelum memasukkan data ke dalam database atau proses lainnya.
    Dengan cara ini, pengguna senang dengan validasi onthego DAN pengembang senang dengan pengembangan validasi hanya sisi server.

    • 5
      • 6

        Tidak begitu cepat Doug - Saya setuju dengan premis awal Anda bahwa fitur-fitur bermanfaat ini, seperti memformat SSN dengan cepat, itu sepele. Dan malas untuk hanya memposting pesan yang salah, ketika Anda dapat memperbaikinya tanpa harus menebak-nebak formatnya.

        Namun, saya juga setuju dengan Nicolas tentang penggunaan logika Sisi Server dalam hubungannya dengan AJAX.

  4. 7

    Judul Anda mengatakan "Impress Your Friends ..." tetapi Anda gagal membuat saya terkesan dengan 2 menit ini, menelepon di pos.

    Tulis ulang judul Anda (terlalu menyesatkan, membuat orang berpikir ada contoh dan praktik yang sedang dibahas).

    Jika orang belum melakukan ini dalam bentuk mereka, maka mereka hanya belajar atau formulir tidak cukup penting untuk menggunakan validasi.

    Pemrogram web sejati sudah mengetahui hal ini dan melakukannya.

    • 8

      jay,

      Maaf soal itu! Maksud saya jelas bukan untuk memberikan umpan balik pengembang - Saya benar-benar datang dari sudut pandang Manajer Produk. Saya setuju dengan Anda - tetapi menarik bahwa beberapa pengembang lain tidak! Saya pikir itu sangat disayangkan.

      Terima kasih telah meluangkan waktu!
      Doug

  5. 9

    Saya setuju sepenuhnya tentang validasi sebagai komponen penting dari aplikasi apa pun. Sebagai pemimpin tim, saya biasanya mendapati diri saya mengirim kode kembali untuk "diselesaikan" karena alasan seperti validasi yang tidak ada atau membatasi panjang input teks.

    Untuk sebagian besar hal yang saya kerjakan, saya merasa dibutuhkan sekitar 50% waktu untuk membuat sesuatu berfungsi, dalam kondisi normal dan jika pengguna menggunakan sistem seperti yang saya inginkan. 50% waktu pengembangan lainnya berasal dari memeriksa input mereka, memastikan integritas data dipertahankan, dan membuat bidang formulir tidak mengizinkan data berbahaya untuk dimasukkan.

    Saya menulis posting tentang bagaimana saya menggunakan InputVerifiers di aplikasi ayunan hava saya, dan menunjukkan bagaimana saya memverifikasi bidang teks email. Ekspresi reguler yang saya gunakan dapat dimodifikasi dengan mudah untuk memvalidasi nomor telepon, kode pos, SSN, dll.

    Entri blog saya ada di http://timarcher.com/?q=node/36

    Tulisan yang bagus Doug!

  6. 10

    Saya setuju. Kata sandi sangat penting dan harus ditanggapi dengan serius. Saya pikir itu normal untuk hampir semua formulir untuk mengetikkan kata sandi dua kali, tetapi tidak menunjukkan validitas kedua kata sandi menunjukkan bahwa itu tidak dianggap serius.

  7. 11

    Saya setuju bahwa validasi klien bisa menjadi fitur yang sangat ramah pengguna. Namun, yang lebih penting adalah memastikan bahwa validasi itu sendiri benar-benar masuk akal.

    Anda memberikan contoh brilian tentang bagaimana validasi dapat menyesatkan pengguna dan, lebih buruk lagi, mengusir mereka dari situs kami:

    Validasi kekuatan sandi Geek Wisdom dari pertimbangan tZhKwnUmIss menjadi kata sandi yang lemah. Ini bukan hanya kata sandi yang sangat kuat tetapi juga akan mengasingkan pengguna karena memberi mereka kesan palsu bahwa masuk ke situs Anda menggunakan kata sandi ini akan menjadi tidak aman.

    Akan jauh lebih baik (dan lebih mudah) untuk memberi petunjuk kepada pengguna bahwa kata sandi yang baik setidaknya terdiri dari enam karakter dan harus berisi angka dan huruf.

    Validasi lain yang meragukan termasuk nama pengguna yang membutuhkan panjang minimum tertentu atau mungkin tidak mengandung spasi. Apa yang salah dengan nama pengguna X, john doe, atau bahkan # *! §? Saya bisa mengatasinya.

  8. 12

    Saya setuju dengan kamu. Beberapa formulir terlihat bagus, tetapi tidak menawarkan validasi yang baik. Informasi pribadi diberikan dan hanya pantas untuk menganggapnya serius seperti semua bentuk bisnis dalam bentuk cetak.

  9. 13
  10. 14
  11. 15

    Saya merasa sedikit lucu bahwa Anda memposting tentang kebaikan untuk menyediakan validasi formulir waktu nyata, namun, formulir komentar Anda di bagian bawah pos tidak memberikan semua ini…

    Saya menyadari bahwa Anda menggunakan WordPress untuk mem-blog pemikiran Anda ke internet, tetapi mungkin memastikan bahwa Anda mempraktikkan apa yang Anda khotbahkan bukanlah ide yang buruk juga. 🙂

    Posting yang bagus, omong-omong, meskipun saya belum tentu setuju dengan semua yang Anda tulis.

    • 16

      Doh! Anda menangkap saya, Amanda! Saya berharap saya punya waktu untuk melakukan validasi formulir yang lebih baik dan mengintegrasikannya ke WordPress. Saya terutama menyukai Adobe sigap kerangka validasi dan akan senang melihat seseorang mengintegrasikan keduanya!

      Terima kasih! (Dan saya selalu menghargai bahwa ada banyak pendapat tentang topik apa pun).
      Doug

Bagaimana menurut Anda?

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.