ラウンドナップ・コンサルティング公式ブログ 代表中山陽平が記事執筆。コンサルのノウハウ進化のための情報収集の一部を発信中。2004年〜開始。

フォーム入力チェックJavaScriptライブラリ

TMT Validatorは、フォーム入力チェック用JavaScriptのライブラリです。

使い方は、外部JavaScriptファイルを一つ読み込み、後は各HTMLのタグ内にattribute等を書くだけです。ちなみにJSファイルはダウンロードしたZIPの中の”script_tmt_validator.js”という600行弱のファイルです。

サンプルはTMT Validator – Validation samplesにありますので、そちらで体験も出来ます。ちなみに、使ったときの挙動としては、普通のチェックスクリプトです。

使い方は詳しくはTMT Validator Syntax Referenceのページにあります。

具体的には…


<form action=”index.htm” tmt:validate=”true” tmt:callback=”displayError”>

の様にformタグに書き加えます。

tmt:validate=”true”で使用する状態になります。

CallBackは、独自に関数を書いて、好みの処理をしたい場合に使います。

以下のページに各formオブジェクトを取ってくる方法など書いてあるので、必要な方はこちらに。

 #TMT Validator – Customizing errors notification

それぞれのinputタグには、同様に tmt:pattern 等のattributeを追加してチェックのパターンを決めます。

これは、submitをした時にアラートとして出るものです。

例えば、tmt:pattern には、

  • email
  • lettersonly
  • alphanumeric
  • integer
  • positiveinteger
  • number

といったパターンが用意されてます。

他にもファイルアップロード用にもいくつかデフォルトで用意されてます。日本語には対応していませんが…。

また、tmt:filters というattributeにて、入力禁止文字を指定できます。デフォルトで以下のものが用意されています。

  • ltrim
  • rtrim
  • nospaces
  • nocommas
  • nodots
  • noquotes
  • nodoublequotes
  • nohtml
  • alphanumericonly
  • numbersonly
  • lettersonly
  • commastodots
  • dotstocommas
  • numberscommas
  • numbersdots

これは先ほどのtmt:pattern とどう違うかというと、サンプルをいじってもらうと分かりやすいかと思いますが、入力禁止文字を入れると、リアルタイムに消去されます。

数字しか入れてはいけないフィールドにアルファベットを連打すると、どんどん勝手に消えていきます。

注釈をつけておかないと、キーボードが壊れたんじゃないかと、などと思われる恐れがあるので、目立つ形で注釈をつける必要があると思いますが、これは有用な予感が。

できれば勝手に消す前にalertを一発出した方が、使用者にとっては分かりやすいと思います。

こんな感じで他にもcheckbox用のものやselect用のものや色々と用意されているので、フォームの入力チェックが面倒くさくなったら、これで済ませてしまうのもいいです。

DreamWeaverとかFrontPageとかでも簡単につけられると言えばそれまでですが(‘A`)

実は一番感銘を受けたのは、submit後の入力チェックではねられると、inValidな部分のフィールドの背景が黄色になることだったりします。

これは間違った場所が分かりやすくてよさげ。

Webコンサルタント中山陽平公式サイトお悩みの方へ。一回のご相談で解決することもあります
ラウンドナップ・コンサルティングへのお問合せ方法 お電話でのご相談もお気軽に。[048-234-3361](10〜16 土日祝日除)全国対応 24時間受付 お問合せメールフォーム

コメントはこちらから

Loading Facebook Comments ...

No Trackbacks.