リアルタイムフォーム検証：ユーザーエクスペリエンスを向上させるための微妙な改善

コアポイント：

• javaScriptを使用してリアルタイムのフォーム検証を?qū)g裝できます。リアルタイムフォーム検証は、ユーザーが入力の有効性に関する即時(shí)フィードバックを提供し、ユーザーエクスペリエンスを改善し、データの整合性を維持し、有効なデータのみが送信されるようにします。
• html5屬性patternおよびrequiredを使用して、フォーム要素の有効な入力範(fàn)囲を定義できます。ブラウザがこれらのプロパティをサポートしていない場(chǎng)合、その値はJavaScriptの互換性ポピュレーターの基礎(chǔ)として使用できます。
• aria-invalid屬性を使用して、フィールドが無効であるかどうかを示すことができます。このプロパティはアクセシビリティ情報(bào)を提供し、CSSフックとして使用して、無効なフィールドを視覚的に示すことができます。
• javaScript関數(shù)instantValidation()フィールドをテストし、実際の検証を?qū)g行し、aria-invalid屬性を制御してフィールドのステータスを示します。この関數(shù)は、onchangeイベントにバインドして、リアルタイムフォームの検証を提供できます。

HTML5は、ブラウザーベースのフォーム検証を?qū)g裝するためのいくつかの新しいプロパティを?qū)毪筏蓼埂?patternプロパティは、テキストエリア要素とほとんどの入力タイプの有効な入力範(fàn)囲を定義する正規(guī)表現(xiàn)です。 required屬性フィールドが必要かどうかを指定します。これらのプロパティをサポートしていない古いブラウザの場(chǎng)合、互換性フィラーの基礎(chǔ)としてその値を使用できます。また、それらを使用して、より興味深い拡張機(jī)能、つまりリアルタイムフォームの検証を提供することもできます。

通常の閲覧動(dòng)作を混亂させ、ユーザー操作を妨げないように、検証を亂用しないことに注意する必要があります。たとえば、 tabキーを使用して無効なフィールドを離れることができないいくつかのフォームを見てきました-JavaScriptが使用され（より正確には虐待されています）、有効になるまでフィールド內(nèi)に留まるように焦點(diǎn)を當(dāng)てます。これはユーザーエクスペリエンスにとって非常に不利であり、アクセシビリティガイドラインに直接違反しています。

この記事では、あまり侵襲性の低い実裝方法を紹介します。それは完全なクライアントの検証でさえありません - それはアクセス可能な方法で実裝されたわずかなユーザーエクスペリエンスエンハンスメントであり、スクリプトをテストしたとき、それはFirefoxの現(xiàn)在のネイティブの実裝とほぼ同じことがわかりました！

基本コンセプト

Firefoxの最新バージョンでは、必要なフィールドが空であるか、その値がパターンと一致しない場(chǎng)合、フィールドは次の図に示すように赤い境界を表示します。

もちろん、これはすぐには起こりません。これが発生した場(chǎng)合、必要なフィールドごとにボーダーがデフォルトで表示されます。代わりに、これらの境界線は、フィールドとやり取りした後にのみ表示されます。これは、基本的には（正確ではありませんが）

イベントと同様です。

したがって、

トリガーイベントとしてonchangeを使用します。または、フィールド內(nèi)の値を入力または貼り付ける限り発射するoninputイベントを使用できます。しかし、これは本當(dāng)に「瞬時(shí)」です。なぜなら、迅速に連続して入力しながら簡(jiǎn)単に繰り返しトリガーできるため、ちらつき効果が発生し、一部のユーザーに退屈または気を散らすことができます。そして、とにかく、oninputはプログラミング入力からトリガーされず、onchangeはトリガーされます。サードパーティのプラグインからのオートコンプリートなどの操作を処理するためにそれが必要になる場(chǎng)合があります。

htmlとcss

を定義します

私たちの実裝を見てみましょう。

<form action="#" method="post">
  <fieldset>
    <legend><strong>Add your comment</strong></legend>

    <p>
      <label for="author">Name <abbr title="Required">*</abbr></label>
      <input
        aria-required="true"
        id="author"
        name="author"
        pattern="^([- \w\d\u00c0-\u024f]+)$"
        required="required"
        size="20"
        spellcheck="false"
        title="Your name (no special characters, diacritics are okay)"
        type="text"
        value=""
      >
    </p>

    <p>
      <label for="email">Email <abbr title="Required">*</abbr></label>
      <input
        aria-required="true"
        id="email"
        name="email"
        pattern="^(([-\w\d]+)(\.[-\w\d]+)*@([-\w\d]+)(\.[-\w\d]+)*(\.([a-zA-Z]{2,5}|[\d]{1,3})){1,2})$"
        required="required"
        size="30"
        spellcheck="false"
        title="Your email address"
        type="email"
        value=""
      >
    </p>

    <p>
      <label for="website">Website</label>
      <input
        id="website"
        name="website"
        pattern="^(http[s]?:\/\/)?([-\w\d]+)(\.[-\w\d]+)*(\.([a-zA-Z]{2,5}|[\d]{1,3})){1,2}(\/([-~%\.\(\)\w\d]*\/*)*(#[-\w\d]+)?)?$"
        size="30"
        spellcheck="false"
        title="Your website address"
        type="url"
        value=""
      >
    </p>

    <p>
      <label for="text">Comment <abbr title="Required">*</abbr></label>
      <textarea
        aria-required="true"
        cols="40"
        id="text"
        name="text"
        required="required"
        rows="10"
        spellcheck="true"
        title="Your comment"
      ></textarea>
    </p>

  </fieldset>
  <fieldset>
    <input name="preview" type="submit" value="Preview">
    <input name="save" type="submit" value="Submit Comment">
  </fieldset>
</form>

この例は、一部のフィールドが必要であり、一部のフィールドが検証され、一部のフィールドが両方の條件を満たす単純なコメントフォームです。

屬性を持つフィールドには、新しい入力タイプをサポートしていない支援技術(shù)のフォールバックセマンティクスを提供するためのrequired屬性もあります。 aria-required

aria仕様は

屬性も定義します。これは、フィールドが無効であるかどうかを示すために使用します（HTML5には同等の屬性はありません）。 aria-invalidプロパティは明らかにアクセシビリティ情報(bào)を提供しますが、赤い境界線を適用するためのCSSフックとして使用することもできます。 aria-invalid

正直に言うと、これはより良く見えることを心配することなく

input[aria-invalid="true"], textarea[aria-invalid="true"] {
  border: 1px solid #f00;
  box-shadow: 0 0 4px 0 #f00;
}

を使用できますが、このようにして、

（IE8など）をサポートしていないことはありません。 box-shadow box-shadow

javascript

を追加します 靜的コードができたので、スクリプトを追加できます。まず、基本的な

関數(shù)が必要です：

addEvent()

次に、特定のフィールドを検証する必要があるかどうかを判斷する関數(shù)が必要です。これは、単に無効でも読み取り専用でも、

function addEvent(node, type, callback) {
  if (node.addEventListener) {
    node.addEventListener(type, function(e) {
      callback(e, e.target);
    }, false);
  } else if (node.attachEvent) {
    node.attachEvent('on' + type, function(e) {
      callback(e, e.srcElement);
    });
  }
}

または

屬性を備えていることをテストするだけです。 pattern 最初の2つの條件は冗長(zhǎng)のように見えるかもしれませんが、要素のrequiredおよび

プロパティが必ずしもその屬性狀態(tài)を反映しているわけではないため、それらは必要です。たとえば、Operaでは、ハードコード屬性

function shouldBeValidated(field) {
  return (
    !(field.getAttribute("readonly") || field.readonly) &&
    !(field.getAttribute("disabled") || field.disabled) &&
    (field.getAttribute("pattern") || field.getAttribute("required"))
  );
}

のフィールドが

屬性に対してdisabledreadonlyを返します（ポイント屬性は、スクリプトを介して狀態(tài)セットのみに一致します）。 readonly="readonly" readonlyこれらのユーティリティが発生したら、フィールドをテストする主な検証関數(shù)を定義し、必要に応じて実際の検証を?qū)g行できます。 undefined したがって、フィールドが必要であるが値がない場(chǎng)合、またはパターンと値があるが、値はパターンと一致しない場(chǎng)合、フィールドは無効です。

パターンは既に正規(guī)表現(xiàn)の文字列形式を定義しているため、文字列を

コンストラクターに渡すだけで、その値をテストできる正規(guī)表現(xiàn)オブジェクトが作成されます。ただし、Regex自體が空の文字列を考慮する必要がないように、値が空でないことを確認(rèn)するために、値を事前テストする必要があります。

function instantValidation(field) {
  if (shouldBeValidated(field)) {
    var invalid =
      (field.getAttribute("required") && !field.value) ||
      (field.getAttribute("pattern") &&
        field.value &&
        !new RegExp(field.getAttribute("pattern")).test(field.value));
    if (!invalid && field.getAttribute("aria-invalid")) {
      field.removeAttribute("aria-invalid");
    } else if (invalid && !field.getAttribute("aria-invalid")) {
      field.setAttribute("aria-invalid", "true");
    }
  }
}

フィールドが無効かどうかを判斷したら、ステータスを示すためにそのaria-invalidプロパティを制御できます - それをまだプロパティを持っていない無効なフィールドに追加するか、プロパティを削除した有効なフィールドからで。とてもシンプル！最後に、これが機(jī)能するためには、検証関數(shù)をonchangeイベントにバインドする必要があります。このように簡(jiǎn)単にする必要があります： ただし、これが機(jī)能するためには、イベントがバブルアップする必要があります（イベントデリゲートとして一般的に知られているテクノロジーを使用）が必要ですが、インターネットエクスプローラー8以前では、

イベント

<form action="#" method="post">
  <fieldset>
    <legend><strong>Add your comment</strong></legend>

    <p>
      <label for="author">Name <abbr title="Required">*</abbr></label>
      <input
        aria-required="true"
        id="author"
        name="author"
        pattern="^([- \w\d\u00c0-\u024f]+)$"
        required="required"
        size="20"
        spellcheck="false"
        title="Your name (no special characters, diacritics are okay)"
        type="text"
        value=""
      >
    </p>

    <p>
      <label for="email">Email <abbr title="Required">*</abbr></label>
      <input
        aria-required="true"
        id="email"
        name="email"
        pattern="^(([-\w\d]+)(\.[-\w\d]+)*@([-\w\d]+)(\.[-\w\d]+)*(\.([a-zA-Z]{2,5}|[\d]{1,3})){1,2})$"
        required="required"
        size="30"
        spellcheck="false"
        title="Your email address"
        type="email"
        value=""
      >
    </p>

    <p>
      <label for="website">Website</label>
      <input
        id="website"
        name="website"
        pattern="^(http[s]?:\/\/)?([-\w\d]+)(\.[-\w\d]+)*(\.([a-zA-Z]{2,5}|[\d]{1,3})){1,2}(\/([-~%\.\(\)\w\d]*\/*)*(#[-\w\d]+)?)?$"
        size="30"
        spellcheck="false"
        title="Your website address"
        type="url"
        value=""
      >
    </p>

    <p>
      <label for="text">Comment <abbr title="Required">*</abbr></label>
      <textarea
        aria-required="true"
        cols="40"
        id="text"
        name="text"
        required="required"
        rows="10"
        spellcheck="true"
        title="Your comment"
      ></textarea>
    </p>

  </fieldset>
  <fieldset>
    <input name="preview" type="submit" value="Preview">
    <input name="save" type="submit" value="Submit Comment">
  </fieldset>
</form>

は発生しません。バブル

。これらのブラウザを無視することを選択できますが、特に問題を解決しやすい場(chǎng)合は、それは殘念だと思います。コードがもう少し複雑であることを意味します。入力とテキストの領(lǐng)域要素のコレクションを取得し、それらを繰り返してonchangeイベントを個(gè)別にバインドする必要があります。 onchange 結(jié)論と見通しonchange

input[aria-invalid="true"], textarea[aria-invalid="true"] {
  border: 1px solid #f00;
  box-shadow: 0 0 4px 0 #f00;
}

それは、ユーザーがフォームを完成させるのに役立つアクセス可能で直感的なヒントを提供するシンプルで非侵襲的なリアルタイムフォーム検証強(qiáng)化です。

このスクリプトが実裝された後、実際にほんの數(shù)ステップで完全な互換性フィラープログラムを完了することができます。このようなスクリプトはこの記事の範(fàn)囲を超えていますが、それをさらに開発したい場(chǎng)合、すべての基本的なモジュールは、フィールドを検証する必要があるかどうかをここにテストします。 、およびバインディングトリガーイベント。 私は認(rèn)めなければなりません、それが本當(dāng)に価値があるかどうかはわかりません！すでにこの拡張機(jī)能（IE7およびすべての最新のブラウザで動(dòng)作している）があり、サーバー側(cè)の検証を?qū)g裝する以外に選択肢がないことを考慮して、

および

のブラウザのサポートがあると考えてください提出前の検証に使用しました - これらすべてを念頭に置いて、別の互換性フィラーを追加する必要がありますか？

required（リアルタイム検証に関するFAQセクションはここに追加できます。コンテンツは元のドキュメントのFAQセクションと同じです）

以上がJavaScriptを使用したインスタントフォーム検証の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語 Web サイトの他の関連記事を參照してください。