当サイトは、「Web入力データのクライアント側チェック・ツール(javascript)」を無料でご提供するサイトです。
By ピエールソフト 2012.7.28
御社の入力画面で、拡張性のある簡単で強力なチェック・ツール を利用してみませんか?
■アクセス累計数:{access}('12.7.28~)

validate4.js (無料) クライアント側、入力データ・チェック・ツールの概説

■クライアント側のチェックなので、利用者の操作性を向上させることができます。
 しかも単純ミス等のデータはサーバ側に送信されませんので、サーバの負荷を軽減することができます。
 ※ サーバ側のチェックを不要にするものではなく、両方のチェックが必要です。

 それではまず、
 1)お名前欄にマウスを持っていってから別の欄へ移動(blur) → 必須項目なのでエラーが表示されます。
 2)郵便番号欄にマウスを持っていく → 入力のヒントが表示されます。
 3)誕生日欄にマウスを持っていく → 日付入力のガイダンスが表示されます。
 4)誕生日欄に5/3と入力後、blurして下さい → 当年-05-03のように編集入力されます。
   選択でもキーボードからでも入力が可能です。
 5)最後にフォームの確認(送信)を押下して下さい → 全ての入力項目をチェックします。


 お問い合わせフォームのデモ 
> データ入力
○ blur + 即時チェック + エラーを吹き出し表示
お名前
例)山田 太郎
フリガナ(全角カナ)
例)ヤマダ タロウ
メールアドレス
例)taro@abc.com
郵便番号
例)101-0021
【住所を自動入力】
都道府県
住所
例)千代田区外神田1-1 和地ビル3階
電話番号
例)0312345678、090-1234-5678
誕生日
例)1991-5-3
お問合せ内容


[機能一覧]
 ・画面表示と同時に先頭の入力欄へカーソルを位置付けます。
 ・[必須]欄の明示が簡単にできます。(それほど困っていないかも)
 ・お名前のフリガナを自動で挿入します。
 ・入力欄へカーソルを移動するとヒント(記述があれば)が表示されます。
 ・入力欄からフォーカスを失った時(blur)、即座にデータをチェックします。
 ・勿論、送信(submit)時にも再度チェックを行ないます。
  (エラーがある場合は先頭の入力欄へカーソルを位置付けます)
 ・入力でエラーがあった場合は、内容を吹き出しで明示します。
 ・入力文字数制限を指定したtextareaでは残りの文字数を明示します。
 ・ガイダンスによる日付の入力ができます。

▲ページの先頭へ


◎validate4.js の利用方法

【 プログラム構成 】

・validate(D)
  ├css/style.css ‥‥‥‥ CSS(御社用に差し替え)
  ├css/validate.css ‥‥‥ エラーメッセージ用CSS
  ├css/baloon5.css ‥‥‥ 吹き出し用CSS
  │ └img(D) ‥‥‥‥‥ baloon.gif、baloon_right.gif、caution.gif
  │
  ├js/validate4.js ‥‥‥ チェック等のモジュール群(javascript)
  ├js/validate4_top.js ‥ validate用のオウンコーディング(javascript)*****調整要
  ├js/autoruby.js ‥‥‥ フリガナの自動セット(javascript)
  └<script src="http://zipaddr.com/js/zipaddrc.js" charset="UTF-8"></script> ‥‥ 郵番から住所自動入力(無料版)


【 利用方法 】

 (0)事前準備

<head>
<link rel="stylesheet" href="css/validate.css" /> ‥‥ エラーを文字表示する場合。
<link rel="stylesheet" href="css/baloon5.css" /> ‥‥ エラーを吹き出し表示する場合。

<script src="http://validate-js.com/js/validate4.js" charset="UTF-8"></script> 又は、

<script src="https://validate-js-com.ssl-xserver.jp/js/validate4.js" charset="UTF-8"></script> ‥‥ SSLで利用する場合。
</head>

 (1)入力データのチェック
   [htmlの修正箇所]
   ・上記(0)を定義して下さい(imgの設置を含む)
   ・form要素に onsubmit="return data_check(this);" を追加して下さい。
   ※radio、checkbox、のid名は、項目id名_1,~項目id名_nとして作成下さい。 ※「利用例のサンプル」を参照。

   [オウンコーディング(当htmlではvalidate4_top.js)の修正箇所]
   入力画面のhtml内容に合わせて調整して下さい。 ※チェック項目名は自動的に取り込んでいます。
   主な確認箇所は、
   ・erropt= "1"; // 1:baloon,2:caution,3:smartPhone文字,etc-文字
   ・va_opt= "";  // 即時チェック,1:阻止
   ・新しい(未定義の)チェック関数は追加で定義する必要があります。なければチェックされません。
   ・入力チェック関数が標準でない項目は上書き修正する必要があります。
    例:var nw_namek= function(){dataname='フリガナ'; check_zkana('namek');}
     (項目名がnamekの表示名称はフリガナで、チェック関数はcheck_zkanaという意味)

    ◎標準チェック関数の一覧(funcall.pdf)

 (2)入力欄の先頭へカーソル位置付け ‥‥標準機能です。
   この機能によってすぐに入力を開始することができます。

 (3)必須項目の明示 ‥‥オプションです。
   表示場所に<span class="hissu"></span>と定義すれば、と表示します。
   逆に、<span class="nini"></span>と定義すれば、と表示します。
   パラメータ(validate4_top.js)を好みに合わせて自由に明示内容を変更(gifにする等)して下さい。

 (4)入力残りの文字数の明示 ‥‥オプションです。
   表示場所に<span id="emcount-comment-600"></span>のような様式で定義して下さい。
   comment:入力項目欄のid名
   600:  最大文字数

 (5)フリガナの自動挿入 ‥‥オプションです。
   <head>要素に<script src="autoruby.js" charset="UTF-8"></script>を定義して下さい。
   入力項目欄には、
   ・id="name"に入力すると、id="namek"にカナが自動挿入されます。同様に、
   ・id="sei"に入力すると、id="seik"にカナが入力、
   ・id="mei"に入力すると、id="meik"にカナが入力されます。

 (6)郵便番号から住所の自動入力 ‥‥無料オプションです。
   <head>要素に<script src="http://zipaddr.com/js/zipaddrc.js" charset="UTF-8"></script>を定義して下さい。
   各項目欄には、郵便番号はid="zip"、都道府県はid="pref"、市区町村はid="city"、住所はid="addr"のようにid名を記述すると、自動入力されます。
   詳細は、http://zipaddr.com/(無料)http://zipaddr2.com/(有料)を参照して下さい。

 (7)入力欄のヒント機能 ‥‥標準機能です。
   次のようにhtmlへ記述すると、mouseoverで表示され、mouseoutで非表示となります。
   <div class="hint" id="項目名_hint" style="display:none;">ヒントの内容を記述</div>

 (8)日付の入力補助機能 ‥‥標準機能です。
   入力のスピードアップが目的の機能で、キーボードからでもガイダンスからでも日付の入力ができます。
   入力データの編集機能と年部分の西暦/和暦併記表示が特徴です。
   詳細は、http://dateformc.com/を参照して下さい。

 (90)【重要】
   Firefox、Google Chrome、ではselect文のチェック操作がNGとなりますので、他の方法で補ってください。

 (99)その他、不明な点は下記のお問い合わせ先へ遠慮なく質問して下さい。


【 利用例のサンプル 】

  ◎標準チェック関数を用いたデモ(1)(mouseout[マウスが離れた時] + 即時チェック + エラーを吹き出し表示)

  ◎標準チェック関数を用いたデモ(2)(blur[フォーカスを失った時] + 即時チェック[送信後] + エラーをPC文字表示)

  ◎標準チェック関数を用いたデモ(3)(blur[フォーカスを失った時] + 即時チェック + エラーをスマートフォン文字で表示)


  ◎日付入力関連のデモ(mouseout[マウスが離れた時] + 即時チェック[送信後] + エラーを吹き出し表示) + 年齢計算

▲ページの先頭へ


◎拡張利用のQ&A

・Q1 エラーの表示方法を吹き出しから文字に変更したい。
   >回答:validate_own()内のerropt="1"をerropt="2"又はerropt="3"に変更して下さい。


・Q2 データの即時チェックをやめ、1回送信した後に即時チェックをしたい。
   >回答:validate_own()内のva_opt=""をva_opt="1"にすると一度送信した後に即時チェックモードとなります。


・Q3 SSL環境で利用するにはどのようにするのですか。
   >回答:内部で自動判定を行なっておりますので、SSL用のURLでモジュールを指定して下さい。

▲ページの先頭へ


◎適用事例の投稿

投稿は、新しい順に3ヵ月間表示しますので是非、ご自慢のサイトをPRして下さい。 尚、当サイトの趣旨に反するようなものは削除しますので、あしからず。

投稿日 事例url PR等のコメント

  新規投稿(構築が完了してから投稿して下さい)

▲ページの先頭へ


◎更新履歴

・2013.11.07 年齢計算機能を追加しました。(Ver5.27)
・2013.10.10 URLチェック機能の拡張を行ないました。(Ver4.24.21)
・2013.04.22 イベントのmouseoutとblurを等価で扱うようにしました。(Ver4.22.18)
・2013.04.16 イベントをmouseoutからblur(フォーカスが外れた時)も選択できるようにしました。(Ver4.21.18)
・2013.04.12 関数が未定義の場合はデータチェックをSKIPするように変更しました。(Ver4.18.18)
・2013.04.11 日付入力関連デモの追加とバグ対策をしました。(Ver4.15.18)
・2013.04.10 ヒント等の機能を拡張して新しくVer4としました。(Ver4.14)
・2013.03.01 エラー表示位置の判別をタグ別にして、吹き出し位置の精度を向上させました。(Ver3.13)
・2012.08.06 再度、吹き出しの表示位置を改善しました。(Ver1.10)
・2012.08.04 エラーの表示位置を改善しました。(Ver1.09)
・2012.07.28 初期(β版)バージョンのサービスを開始しました。

▲ページの先頭へ


◎お問い合わせ

 ■お問い合わせ等のフォームはこちらから。

【 ピエールソフト 】
〒312-0033 茨城県ひたちなか市市毛815-5
  代表: 照沼 辰郎(てるぬま たつろう)
  TEL : 029-274-1629
  FAX : 029-274-1629
  ホーム: http://pierre-soft.com/

[運営サイト]
http://validate-js.com/(フォームデータのチェックツール:validate4.js)
http://zipaddr.com/(郵便番号 → 住所の自動入力:zipaddrc.js)無料
http://zipaddr2.com/(郵便番号 → 住所の自動入力:zipaddr2.js)有料
http://asp-form.jp/(世界一のお問い合わせフォーム:ASP型)
http://hp-mail.org/(究極のお問い合わせメールフォーム:hpmail)