308.html

JavaScript/自動で入力チェックを行うJavaScriptライブラリ/Realtime validation using Ajaxの設定方法

あらまし †

このページは、masuidrive.jpで提供されている「Realtime validation using Ajax」を利用して自動入力チェックをさせていたが、Validator.register関数の設定をどうしたものか…と思って試行錯誤したときのメモです。

↑

[edit]

Realtime validation using Ajaxとは †

Realtime validation using Ajaxを参照ください

公式のサンプルは↓こちら
http://masuidrive.jp/validation/

↑

[edit]

自分で作ったサンプル †

↑

[edit]

失敗事例: 同じclassがあっても最初の1個しか実行されない †

サンプルは↓こちら
http://okra.ark-web.jp/~takemura/public/js/adobe_air/form_sample_for_web_use_realtime_validation_using_ajax.html

このようにValidator.register関数を設定してました

var validates_ok    = '<img src="images/icon_accept.gif" width="27" height="16" style="vertical-align: middle"/>';
var validates_error = '<img src="images/icon_stop.gif" width="27" height="16" style="vertical-align: middle"/>';
var validates_info  = '<img src="images/icon_info.png" width="27" height="16" style="vertical-align: middle"/>';

Validator.register({
  "#mail" : {
    "/^([^@\\s]+)@((?:[-a-z0-9]+\\.)+[a-z]{2,})$/": "OK",
    "/^$/": validates_info+"必ず入力してください",
    "/.*/": validates_error+"正しいメールアドレスを入力してください" 
  },
  ".validate_necessary" : {
    "/^$/": validates_info+"必ず入力してください",
    "/.*/": validates_ok
    },
  ".validate_kana" : {
    "/[^ぁ-ん゛゜ー 　]/": validates_error+"ひらがな以外は入力できません",
    "/.*/": validates_ok
  },
   ".validate_number" : {
    "/^[0-9|\-]+$/": validates_ok,
    "/.*/": validates_info+"数字かハイフンで入力してください"
  }
});

HTMLは↓このようにしていました

<li>お名前　：<input type="text" name="name" id="name" class="validate_necessary" /><span id="name_msg"></span></li>
<li>ふりがな：<input type="text" name="kana" id="kana" class="validate_kana" /><span id="kana_msg"></span></li>
<li>郵便番号：<input type="text" name="zip" id="zip" class="validate_number" /><span id="zip_msg"></span></li>
<li>ご住所　：<input type="text" name="address" id="address" /><span id="address_msg"></span></li>
<li>電話番号：<input type="text" name="tel" id="tel" class="validate_number" /><span id="tel_msg"></span></li>
<li>メールアドレス：<input type="text" name="mail" id="mail" /><span id="mail_msg"></span></li>

サンプルを実行してみると分かるように、電話番号の『validate_number』が効いてません！
また、ふりがなを必須にしたいのですが、既にvalidate_kanaがあるのでvalidate_necessaryを実行できません！

↑

[edit]

結局1要素ずつ宣言しなきゃダメ †

いまのところの結論としては、1要素ずつ宣言しないとダメなのかな、と思います。

サンプルは↓こちら
http://okra.ark-web.jp/~takemura/public/js/adobe_air/form_sample_for_web.html

Validator.registerの宣言は↓こちら

Validator.register({
  "#name" : {
    "/ $/": validates_info+"必ず入力してください",
    "/.*/": validates_ok
  },
  "#kana" : {
    "/[ ぁ-ん゛゜ー 　]/": validates_error+"ひらがな以外は入力できません",
    "/ $/": validates_info+"必ず入力してください",
    "/.*/": validates_ok
  },
  "#zip" : {
    "/[ 0-9|\-]/": validates_error+"数字かハイフンで入力してください",
    "/ $/": validates_info+"数字かハイフンで入力してください",
    "/.*/": validates_ok
  },
  "#address" : {
    "/ $/": validates_info+"必ず入力してください",
    "/.*/": validates_ok
  },
  "#tel" : {
    "/[ 0-9|\-]/": validates_error+"数字かハイフンで入力してください",
    "/ $/": validates_info+"数字かハイフンで入力してください",
    "/.*/": validates_ok
  },
  "#mail" : {
    "/ ([ @\\s]+)@((?:[-a-z0-9]+\\.)+[a-z]{2,})$/": validates_ok,
    "/ $/": validates_info+"必ず入力してください",
    "/.*/": validates_error+"正しいメールアドレスを入力してください"
  }
 });

HTMLは↓こちら

<li>お名前　：<input type="text" name="name" id="name" /><span id="name_msg"></span></li>
<li>ふりがな：<input type="text" name="kana" id="kana" /><span id="kana_msg"></span></li>
<li>郵便番号：<input type="text" name="zip" id="zip" /><span id="zip_msg"></span></li>
<li>ご住所　：<input type="text" name="address" id="address" /><span id="address_msg"></span></li>
<li>電話番号：<input type="text" name="tel" id="tel" /><span id="tel_msg"></span></li>
<li>メールアドレス：<input type="text" name="mail" id="mail" /><span id="mail_msg"></span></li>

↑

[edit]

自作関数の結果を返すようにもできるみたい †

Validator.register関数の設定には、正規表現を評価してメッセージを表示する方法の他に関数を実行して評価させることもできるらしい

例えば、↓このようにできる

Validator.register({
  "#name" : check_name,
  (...)
});
function check_name(el) {
  if (el.value == 'hoge') {
    return validates_info+'それは良い名前ですね！';
  }
  return validates_ok;
}

「お名前」に「hoge」と入れた場合のみ「それは良い名前ですね！」と言われるようにできます。

↑

[edit]

未だできていないこと †

↑

[edit]

文字数チェック †

実は、入力チェックに「文字数チェック」を入れてみようかと思ってコードを覗いて見たら、上記の自作関数の指定方法を知りました^^
でも、正規表現でのチェックと自作関数でのチェックを一緒には実行できないので、イマイチです…
- それでも、「文字数チェック」だけ実行するなら↓こんな感じ?
```
Validator.register({
  "#name" : check_length,
  (...)
});
function check_length(el) {
  if (el.value.length > 50) {
    return validates_error+'入力は50文字まで！';
  }
  return validates_ok;
}
```