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

例 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 を返す。

スクリプトコード:

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()">
	<p>
		<label for="name">Name: </label>
		<input type="text" name="name" id="name" />
	</p>
	<p>
		<label for="tel">Telephone number: </label>
		<input type="text" name="tel" id="tel" />				
	</p>
	<p>
		<input type="submit" />
	</p>
</form>

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