Skip to content

テクニック SCR18:クライアントサイドのバリデーション及びアラートを提供する

このテクニックについて

このテクニックは、次に関連する:

このテクニックは、利用者の入力を検証するコンテンツに適用される。

解説

このテクニックの目的は、クライアントサイドのスクリプトによって、各フィールドで利用者が入力する値を確認することである。エラーが見つかった場合、警告ダイアログを表示し、エラーの内容をテキストで示す。警告ダイアログを閉じるとともに、スクリプトによってキーボードフォーカスをエラーが起こったフィールドに移動させれば、それは利用者にとって役立つ。

事例

事例 1: イベントハンドラで単一のコントロールをチェックする

以下のスクリプトは、有効な日付がフォームのコントロールに入力されたかをチェックする。

<label for="date">Date:</label>
<input type="text" name="date" id="date" 
  onchange="if(isNaN(Date.parse(this.value))) 
  alert('This control is not a valid date. 
  Please re-enter the value.');">

事例 2: 利用者がフォームを送信したときに複数のコントロールをチェックする

次の例はフォーム内の複数のコントロールを表している。form 要素は、利用者がフォームを送信しようとした際、検証スクリプトを実行するために、イベントハンドラを作成する onsubmit 属性を用いている。検証で問題がない場合、イベントは true を返し、フォームの送信を続行する。検証でエラーが検出された場合は、利用者が問題を修正できるようエラーメッセージを表示し、送信を取り消すために false を返す。

注記

この事例は簡潔さのためにアラートを用いて説明している。利用者により役立つ通知は、問題のあるコントロールをハイライトし、エラーの内容とデータの修正が必要なコントロールに移動する方法をページ上に示すことである。

この事例では簡潔さのために form 要素に onsubmit 属性を用いているが、通常であればページがロードした際にフォーム送信用のイベントリスナーを作成する。

スクリプトコード:

function validate() {
  // initialize error message
  var msg = "";
	
  //validate name
  var pattern = /^[a-zA-Z\s]+$/;
  var el = document.getElementById("name");
  
  if (!pattern.test(el.value)) {
    msg += "Name can only have letters and spaces. ";
  }
	
  // validate number
  var pattern = /^[\d\-+\.\s]+$/;
  var el = document.getElementById("tel");

  if (!pattern.test(el.value)) {
    msg += "Telephone number can only have digits and separators. ";
  }
	
  if (msg != "") {
    alert(msg);
    return false;
  }
  else {
  return true;
  }

フォームコード:

<form action="multiple-controls.html" onsubmit="return validate()">
  <div>
    <label for="name">Name:</label>
    <input autocomplete="name" id="name" name="name" type="text">
  </div>
  <div>
    <label for="tel">Telephone number:</label>
    <input autocomplete="tel" id="tel" name="tel" type="tel">
  </div>
  <div>
    <input type="submit">
  </div>
</form>

利用者がフォームを送信したときに複数のコントロールをチェックする動作例にデモがある。

検証

手順

特定の入力を必要とするフォームのフィールドに対して:

  1. 無効なデータを入力する。
  2. エラーを説明している警告が提供されているかどうかを判断する。

Expected Results

  • 2 が真である。
Back to Top