楽にフォーム入力チェックを実装するJavaScript (JSValidate)
2007年9月27日(木) 08:00
サイト上に入力フォームを設置する場合注意したいのは、ユーザーが入力する際に迷わずに必要な項目を入力できるかといった内容になる。多くの場合、入力フォームを経由することで離脱率が上がり、コンバージョン率低下の要因となる。「フォーム入力のしやすさ」以外にも様々なケースがあるが、入力ミスなどを適切に表示するJavaScriptライブラリがJSValidate。
JSValidateの入力チェックは非常にシンプルになっている。あらかじめ指定した正規表現(入力書式)と一致するか否かの判定のみを行う。後は、一致しなかった場合の、エラー表示文を設定しておくだけでよい。

ドキュメントとカスタマイズ
ライブラリであらかじめ定義されている、入力書式はドキュメントページに解説があるので参照していただきたい。英語圏での利用する上では問題ないが、日本国内向けに利用するには、カスタマイズして利用する必要がある。
JSライブラリを編集して利用する場合には、エンコードの種類に注意してカスタマイズすれば良い。また、HTML中でカスタムエラー表示を定義しておけば、優先してエラーメッセージとして表示されるようになる。
入力チェックJSライブラリとしては非常にシンプルなつくりになっている。複雑なエラー表示はできないものの、一定の書式に則って入力してもらうには十分な機能だろう。補助的な入力支援として利用するのにお勧めする。
関連する記事
- デザインが魅力的なスライドショーJavaScript (Lightview)
- 楽にフォーム入力チェックを実装するJavaScript (JSValidate)
- CSSデザインレイアウトをオンラインで簡単に作成する (YAML)
- ユーザーが再配置可能なWedgetを実装するJavaScript (Prototype Portal Class)
- フォームボタンCSSデザインするテクニック (Rediscovering Button Element)
- 半透明の角まるツールチップを表示するJavaScript (CoolTips)
- JavaScriptでプログレスバーを簡単に実装する (jsProgressBarHandler)
- JavaScriptコード圧縮して盗用から守る (packer)
- iTuneのようにカバーアートを表示するFlash (iTunes Coverflow)
- 画像をサムネイルのサイズで表示するJavaScript (jQuery Thumbs)
- Ajaxでサクサク動くWebファイルマネージャ (Relay)
- アンカータグを利用してスムーススクロールを実装する (df Smooth Scroll)
- MacでもFlashでホイール操作が出来るようにする (SWFMacMouseWheel)
- HTMLなどタグ編集を楽にするエディタ機能JavaScript (jTagEditor)
- 使いやすいYUIライブラリのWYSIWYGエディタ (Rich Text Editor)
- フォトショップで作る80種類のテキストエフェクト集 (photoshoproadmap.com)
- Flashで便利なTweenクラスのわかりやすい解説 (Tween Class Easing)
- CSSレイアウト情報をレイヤー表示するブックマーク (XRAY)
- Lightboxのような透過レイヤー表示の実装サンプル (Lightbox Effect)
- CSSデザインで綺麗なボタンを作成する (How to make sexy buttons with CSS)

