JavaScriptを使用したインスタントフォーム検証

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

コアポイント：

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

HTML5は、ブラウザーベースのフォーム検証を実装するためのいくつかの新しいプロパティを導入します。 patternプロパティは、テキストエリア要素とほとんどの入力タイプの有効な入力範囲を定義する正規表現です。 required属性フィールドが必要かどうかを指定します。これらのプロパティをサポートしていない古いブラウザの場合、互換性フィラーの基礎としてその値を使用できます。また、それらを使用して、より興味深い拡張機能、つまりリアルタイムフォームの検証を提供することもできます。

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

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

基本コンセプト

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

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

イベントと同様です。

したがって、

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

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>

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

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

aria仕様は

属性も定義します。これは、フィールドが無効であるかどうかを示すために使用します（HTML5には同等の属性はありません）。 aria-invalidプロパティは明らかにアクセシビリティ情報を提供しますが、赤い境界線を適用するための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

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

関数が必要です：

addEvent()

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

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つの条件は冗長のように見えるかもしれませんが、要素のrequiredおよび

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

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

のフィールドが

属性に対してdisabledreadonlyを返します（ポイント属性は、スクリプトを介して状態セットのみに一致します）。 readonly="readonly" readonlyこれらのユーティリティが発生したら、フィールドをテストする主な検証関数を定義し、必要に応じて実際の検証を実行できます。 undefined したがって、フィールドが必要であるが値がない場合、またはパターンと値があるが、値はパターンと一致しない場合、フィールドは無効です。

パターンは既に正規表現の文字列形式を定義しているため、文字列を

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

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プロパティを制御できます - それをまだプロパティを持っていない無効なフィールドに追加するか、プロパティを削除した有効なフィールドからで。とてもシンプル！最後に、これが機能するためには、検証関数をonchangeイベントにバインドする必要があります。このように簡単にする必要があります： ただし、これが機能するためには、イベントがバブルアップする必要があります（イベントデリゲートとして一般的に知られているテクノロジーを使用）が必要ですが、インターネットエクスプローラー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>

は発生しません。バブル

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

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

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

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

および

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

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

以上がJavaScriptを使用したインスタントフォーム検証の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。