2011年4月26日火曜日

HTML5で入力値チェック

 HTML5では、JavaScriptを用いなくとも、ユーザビリティの高いクライアントサイドでの入力値チェックが行えるため、フォーム関連要素に以下のようなAPIが用意されています。
* willValidate
この要素が入力値チェックの対象となるかどうか
* validity
入力値チェックの状態を表す。プロパティの値は「ValidityState」という型のオブジェクトで、以下のプロパティ(全てboolean型)を持つ
* valueMissing
必須制約違反の場合、true
* typeMismatch
タイプ制約違反の場合、true
* tooLong
文字列長が長過ぎた場合、true
* rangeUnderflow
入力値が妥当な範囲を下回っていたら、true
* rangeOverflow
入力値が妥当な範囲を上回っていたら、true
* stepMismatch
step属性で指定した値の段階にマッチしなかったら、true
* customError
カスタムエラー(setCustomValidity()を使用)の場合、true
* valid
入力値が妥当かどうか
* validationMessage
エラーメッセージの内容を取得する
* setCustomValidity(message)
カスタムのエラーメッセージを設定する。空文字列をセットすると、エラーメッセージをクリア
* checkValidity()
入力値チェックを明示的に実行
* invalidイベント
入力値チェックに不合格だった際、対象の要素から発生するイベント
 上記のAPIを組み合わせれば、かなり高度な入力値チェックを実装可能です。

0 件のコメント:

コメントを投稿