リアルタイムのフォーム検証でWeb訪問者を感動させる

オンラインフォーム

Webアプリケーションのユーザーとして通常感じる第一印象は、Webフォームに入力するときです。 検証がゼロであるか、フォームの内容が送信されるのを待ってから、発生する可能性のある問題を通知するWebフォームの数に驚いています。

私の親指のルールは、検証されていないものはすべてサポートされるということです。 フォームを送信する前に検証できるものはすべてである必要があります。 Ajaxの登場により、送信前にデータベースに対してデータを検証することもできます。 怠惰なルートを選択しないでください-ユーザーは助けに感謝します!

ここではいくつかの例は、次のとおりです。

  1. メールアドレス –メールアドレスをXNUMX回入力して検証するフォームは問題ありませんが、一致するかどうか、または適切に作成されているかどうかがわからないという事実は許されません。
  2. パスワード –パスワードをXNUMX回入力させる場合は、フォームを投稿する前に、値が同じであることを確認してください。
  3. パスワードの強度 –特定のパスワード強度(英数字または大文字と小文字の組み合わせ)が必要な場合は、パスワードを入力しているときにフィードバックを提供してください。失敗したことを通知する前に、送信するのを待たないでください。
  4. 日付 – am / d / yyyy形式の日付が必要な場合は、これらの値を入力して適切にフォーマットすることにより、単一のフィールドに情報を入力できるようにします。 先行ゼロが必要な場合は、後に入れてください。 ある形式を表示して別の形式をデータベースに保存してもかまいません。
  5. 今日の日付 –私のためにそれを記入してください! なぜあなたはすでにそれを知っているのに日付を記入するように私に頼むのですか?!
  6. 日付形式 –国際出願がある場合は、出願の国際化に基づいて日付形式をデフォルトにすることができます。 もちろん、ユーザーがそのオプションを上書きして独自のオプションを選択できるオプションがあると便利です。
  7. 社会保障番号 –フィールドからフィールドに自動的にジャンプするJavaScriptを追加したり、プログラムで値の間にダッシュを入れたりするのは非常に簡単です。
  8. 電話番号 –国際化を考慮に入れると、これらのタイプのフィールドは、インターフェイスで電話番号をフォーマットすることによって簡略化することもできますが、バックエンドに効率的な別のフォーマットで保存します。 ユーザーに括弧、スペース、ダッシュを入力させないでください。
  9. テキストの最大長 –データベースに保存される文字数を制限する場合は、その数の文字を入力させないでください。 難しい検証も必要ありません…テキストボックスの設定にすぎません。
  10. 最小テキスト長 –最小のテキスト長が必要な場合は、十分な文字数になるまでアラームを鳴らしてください。

これは、からのパスワード強度関数の例です。 オタクの知恵:

パスワードを入力します。

更新:10年26月2007日–JavaScriptライブラリをダウンロードできる優れたリソースを見つけました。 LiveValidationと呼ばれるフォーム検証.

16のコメント

  1. 1

    これらがフォームの優れた機能であることに同意しますが、フロントエンドのJavaScript検証を実行しないことは「言い訳ができない」と言うことは、個人的な意見です。 私はjavascriptでの作業が大好きで、あなたが話していることのいくつかを行うためにかなりきちんとした編集マスクをいくつか書いていますが、それらの多くは些細なことではなく、そこにあるjavascriptフォーム検証パッケージの多くには多くの大きな穴があります。 誰もが(ほとんどの場合)より複雑なフロントエンドのJavaScript検証を使用して、バックエンドの検証を複製することに時間を費やすわけではありません。

    良い点ですが、私の意見では、すべてのオンラインフォームが「必要」なものではありません。

  2. 2

    パスワードチェッカーは比較的壊れています。 パスワードが長ければ、どんなパスワードでも十分です。

    例:

    これは本当に平凡なパスワードですか?

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

  3. 4

    私にとって最良のフォーム検証は、AJAX /サーバー側の検証であるときに、クライアント側の検証の印象をユーザーに与えることです。
    フォーム要素に、フォーム全体をAJAX経由でサーバーに送信するイベント処理(キーアップ、ぼかし、クリックなど)をアタッチし、対応するエラーメッセージを返す「チェック」関数を呼び出すだけです(このパスワードも同様です)。単純で、その日付の形式が間違っているなど…)
    ユーザーが送信ボタンをクリックして最終的にフォームを投稿した場合でも、「チェック」サーバー側機能を使用して、データベースまたはその他のプロセスにデータを挿入する前に、フォームを最後に検証することができます。
    このように、ユーザーはオンザゴー検証に満足し、開発者はサーバー側のみの検証開発に満足しています。

    • 5

      ニコラス、

      それは確かなアドバイスのように聞こえます。 私はプログラマーではありません(ただし、いくつかのアプリケーションをハッキングしました)。

      ダグ

      • 6

        それほど速くないダグ– SSNをオンザフライでフォーマットするなど、これらの便利な機能は簡単であるというあなたの当初の前提に同意します。 そして、フォーマットを推測せずに修正できるのに、間違っているというメッセージを投稿するのは怠惰です。

        ただし、サーバーサイドロジックをAJAXと組み合わせて使用​​することについてもNicolasに同意します。

  4. 7

    あなたのタイトルは「あなたの友達を感動させる…」と言っていますが、あなたはこの2分間で私を感動させることができず、郵便で電話をかけました。

    タイトルを書き直します(誤解を招きすぎて、議論されている例や実践があると思わせます)。

    人々がまだフォームでこれを行っていない場合、彼らは学習しているだけであるか、フォームは検証を使用するのに十分重要ではありません。

    実際のWebプログラマーはこれをすでに知っており、それを実行しています。

    • 8

      ジェイ、

      すみません! 私のポイントは間違いなく開発者のフィードバックを提供することではありませんでした–私は本当にプロダクトマネージャーの観点から来ていました。 私はあなたに同意しますが、他の開発者がそうしないのは興味深いことです。 残念なことだと思います。

      お時間を割いていただきありがとうございます!
      ダグ

  5. 9

    私は、検証があらゆるアプリケーションの必要なコンポーネントであることに完全に同意します。 チームリーダーとして、私は通常、検証の欠落やテキスト入力の長さの制限などの理由で、コードを「終了」した状態で送り返しています。

    私が取り組んでいるほとんどのことについて、通常の状態で、ユーザーが意図した方法でシステムを使用している場合、何かが機能するまでに約50%の時間がかかることがわかります。 開発時間の残りの50%は、入力をチェックし、データの整合性が維持されていることを確認し、フォームフィールドに悪意のあるデータの入力を許可しないようにすることで発生します。

    havaスイングアプリでInputVerifiersを使用する方法について投稿し、メールテキストフィールドを確認する方法を示しました。 私が使用する正規表現は、電話番号、郵便番号、SSNなどを検証するために簡単に変更できます。

    私のブログ投稿は http://timarcher.com/?q=node/36

    良い記事ダグ!

  6. 10

    同意する。 パスワードは非常に重要であり、真剣に受け止める必要があります。 ほとんどすべてのフォームでパスワードをXNUMX回入力するのは正常なことだと思いますが、XNUMXつのパスワードの有効性を示さないことは、それが真剣に検討されていないことを示しています。

  7. 11

    クライアントの検証が非常にユーザーフレンドリーな機能になる可能性があることに同意します。 ただし、検証自体が実際に意味をなすものであることを確認することがより重要です。

    あなたは、検証がユーザーを誤解させ、さらに悪いことに、ユーザーを私たちのサイトから遠ざける方法の素晴らしい例を提供しました。

    GeekWisdomのパスワード強度の検証 tZhKwnUmIss 弱いパスワードになります。 これは完全に強力なパスワードであるだけでなく、このパスワードを使用してサイトにログインするのはどういうわけか安全ではないという誤った印象をユーザーに与えるため、ユーザーを遠ざけることになります。

    適切なパスワードは少なくともXNUMX文字の長さであり、数字と文字の両方を含める必要があることをユーザーに単に示唆する方がはるかに優れています(そして簡単です)。

    その他の疑わしい検証には、特定の最小長を必要とする、またはスペースを含まない可能性のあるユーザー名が含まれます。 ユーザー名の何が問題になっていますか X, ジョンドウ、 あるいは #*!§? 私はそれを処理することができます。

  8. 12

    仰るとおりです。 一部のフォームは正常に見えますが、適切な検証を提供していません。 個人情報は提供されており、ハードコピーのビジネスフォームと同じように真剣に受け止めることが適切です。

  9. 13

    ええ、私はいくつかのサンプルコードを期待してここに来ました。 この投稿のトピックの名前を変更してください。

  10. 14
  11. 15

    リアルタイムのフォーム検証を提供することの良さについて投稿するのは少し面白いと思いますが、投稿の下部にあるコメントフォームにはこれらのどれも提供されていません…

    あなたはWordPressを使って自分の考えをインターネットにブログで書いていると思いますが、説教することを確実に実践することもそれほど悪い考えではありません。 🙂

    ちなみに、あなたが書いたすべてに必ずしも同意しなくても、良い投稿です。

    • 16

      ドー! あなたは私をバストした、アマンダ! より良いフォーム検証を行い、それをWordPressに統合する時間があればいいのにと思います。 私は特に好きです Adobe Spry 検証フレームワークであり、誰かがXNUMXつを統合するのを見たいです!

      ありがとう! (そして、私は常に、どのトピックについても複数の意見があることを感謝しています)。
      ダグ

どう思いますか?

このサイトはAkismetを使用して迷惑メールを減らします。 コメントの処理方法を学ぶ.