リアルタイムのフォーム検証で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

    I agree those are great features for forms, but saying that it is “inexcusable” to not do perform front end javascript validation is a more of an personal opinion. I love working in javascript, and have written some pretty neat editmasks to do some of the things you talk about, but a lot of them are far from trivial, and many of the javascript form validation packages out there have a number of big holes. Not everyone will invest the time into duplicating their back end validation with (more often than not) more complex front end javascript validation.

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

  2. 2

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

    例:

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

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

  3. 4

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

    • 5
      • 6

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

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

  4. 7

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

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

    If people are not doing this already in their forms, then they are just learning or the form is not important enough to use validation.

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

    • 8

      ジェイ、

      Sorry about that! My point was definitely not to provide developer feedback – I really was coming from the point of view of a Product Manager. I agree with you – but it’s interesting that some other developers don’t! I think that’s unfortunate.

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

  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

      Doh! You busted me, Amanda! I do wish I had time to do better form validation and to integrate it into WordPress. I especially like the Adobe Spry 検証フレームワークであり、誰かがXNUMXつを統合するのを見たいです!

      Thanks! (And I always appreciate that there are multiple opinions on any topic).
      ダグ

どう思いますか?

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