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

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

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

 それではまず、簡単な操作を、
 1)お名前の入力欄にマウスを持っていってから別の欄へ移動(blur) → 項目なのでエラーが表示されます。
 2)郵便番号欄にマウスを持っていく → 入力のヒントが表示されます。
 3)郵便番号を入力すると、住所が自動入力されます。これは、https://zipaddr.com/の機能です。
 4)誕生日欄にマウスを持っていく → ヒントの他に日付入力のガイダンスが表示されます。
 5)誕生日欄に5/3と入力後、blurして下さい → YYYY-05-03のように編集入力されます。
   選択からでもキーボードからでも入力が可能です。
 6)同時に、年齢欄が連携されていますので年齢が自動計算されます。
 7)お問合せ内容欄に文字を入力すると、残りの入力可能文字数が表示されます。
 8)最後にフォームの確認(送信)を押下して下さい → 全ての入力項目をチェックします。


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


[機能一覧]
 (1)画面表示と同時に先頭の入力欄へカーソルを位置付けます。
 (2)欄の明示が簡単にできます。(それほど困っていないかも)
 (3)お名前のフリガナを自動で挿入します。
 (4)入力欄へカーソルを移動するとヒント(記述があれば)が表示されます。
 (5)入力欄からフォーカスを失った時(blur)、即座にデータをチェックします。
 (6)勿論、送信(submit)時にも再度チェックを行ないます。
 (7)入力でエラーがあった場合は、内容を吹き出しで明示(他に2パターン)します。
 (8)入力文字数制限を指定したtextareaでは残りの文字数を明示します。
 (9)郵便番号から住所を自動入力する強力な機能が使えます。
 (10)日付入力では年、月、を補ったりフォーマットの編集ができます。
 (11)誕生日等は西暦/和暦併用のガイダンスから日付入力ができます。(又、kb入力と共用が可能)
 (12)日付入力と対にして年齢計算をすることができます。

▲ページの先頭へ


◎validate5.js の利用方法

【 プログラム構成 】

・validate関連ファイル
  ├css/validate5.css‥‥‥ エラーメッセージ用CSS(ヒント、VA.erropt="2"、VA.erropt="3"の時)
  ├css/baloon5.css ‥‥‥ 吹き出し用CSS
  │ └img(D) ‥‥‥‥‥ baloon.gif、baloon_right.gif、caution.gif(VA.erropt="1"の時)
  │
  ├<script src="https://zipaddr.github.io/validate5.js" charset="UTF-8"></script> ‥‥ 入力データ・チェック用
  │
  ├js/validate5_top.js ‥ validate用のオウンコーディング(javascript)*****パラメータ定義(調整要)
  ├<script src="https://zipaddr.github.io/zipaddrx.js" charset="UTF-8"></script> ‥‥ 郵番から住所自動入力(無料版)
  └js/autoruby.js ‥‥‥ フリガナの自動セット(javascript)


【 利用方法 】

 (0)事前準備

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

<script src="https://zipaddr.github.io/validate5.js" charset="UTF-8"></script>

<script src="js/validate5_top.js" charset="UTF-8"></script> ‥‥ 標準以外チェック処理用の変更・追加定義
</head>

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

 (2)必須項目の明示 ‥‥標準機能です。
   表示位置に<span class="hissu"></span>と定義すれば、と表示します。
   他に、<span class="nini"></span>と定義すれば、と表示します。
   ※パラメータ指定(validate5_top.js)を好みに合わせて自由に明示内容を変更(jpg等にする)して下さい。

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

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

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

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

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

 (8)入力残りの文字数の明示 ‥‥標準機能です。
   表示位置に<span id="emcount-comment-600"></span>のような様式で定義して下さい。
   emcount:キーワード
   comment:入力項目欄のid名
   600:  最大文字数

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

 (10)日付の入力補助機能 ‥‥標準機能です。
   入力スピードアップが目的の機能で、キーボードからでもガイダンスからでも日付入力ができます。
   入力がddだけの場合はyyyy、mmを、mm/ddの場合はyyyyを補います。
   ※操作月が mm>=10 で入力データの月が mm<=5 の場合は、翌年を設定します。
   ※年月日の区切りは、/、-、:、どれでも有効です。

 (11)ガイダンス方式による日付の入力‥‥標準機能です。
   利用する箇所にid名を指定 or 定義(オウンコーディング)します。   ※それぞれ最大9箇所の入力欄を設定することができます。
  ・dateform1~9: ‥‥ キーボード入力の年月日。
  ・dateyym1 ~9: ‥‥ キーボード入力、ガイダンス指示の併用型で年月。
  ・dateyymd1~9: ‥‥ キーボード入力、ガイダンス指示の併用型で年月日。
  ・データフォーマットの標準様式は、yyyy-mm-dd、yyyy-mm、です。変えたい場合は、オウンコーディングで指定します。

[ 指定例 ]
<input type="text" name="dateyymd1" id="dateyymd1" class="form_txt-name" placeholder="例:1991/05/03">

function validate_own(){
	VA.d_fymds[1]="yyyy/mm/dd";  // 様式の設定
};


 (12)年齢の自動計算 ‥‥標準機能です。
   (10)(11)と対にしてid名を合わせると自動計算されます。
   ※id='dateform1'はid='agef1'~、id='dateyymd1'はid='ages1'~、のようにします。


 (90)オウンコーディングで修正可能なパラメータ

[2017.04.08現在の変更可能な項目]
//エラーの表現パターン
this.erropt="1";              // 1:baloon,2:caution,3:smart文字,etc-文字
this.opt="";                  // 即時チェック,1:阻止
this.bgcf="";                 // 入力欄の初期bgc
this.v= "mouseover";
this.t= "mouseout";
this.b= "blur";
this.brows="";
this.debug="";                // 1:debug
//データチェック用
this.errmsg0= "";
this.errmsg1= "の入力がありません。<br>";
this.errmsg2= "を正しく入力して下さい。<br>";
this.errmsg3= "が不一致です。<br>";
this.errmsg4= "メールアドレスが不一致です。";
this.message1="(zzz文字以内)";
this.message2="(残り yyy/zzz文字)";
this.message3=' <font color="red">*over*</font>';
this.ninim= '<span style="color:#0099cc"> [任意]</span>';
this.hissum='<span style="color:#cc0000"> [必須]</span>';
this.subm_off="subm_off";     // 未入力
this.subm_on= "subm_on";      // submit
this.error= "";               // 1:エラー有り
this.err_color= "red";        // エラー文字色
this.contract="GrGUNsqbw3uP"; // 契約コード(c)
this.inarea= new Array();     // データチェック項目のid名一覧定義
this.addarea=new Array();     // 改廃用
//日付の入力編集用
this.df_left=10;              // offsetLeft
this.df_top= 18;              // offsetTop
this.df_bgc= "#0099cc";       // backgroundColor
this.df_dmc= "-";             // delimit_code
this.df_smart="";             // 1:SmartPhone, s:Short
this.d_fm= "dateform"; this.d_fms= new Array(); this.d_fmt= new Array(); this.d_frms= new Array(); // yymdのkb入力用
this.d_ym= "dateyym";  this.d_yms= new Array(); this.d_ymt= new Array(); this.d_fyms= new Array(); this.d_syys= new Array(); //築年などの入力用
this.d_ymd="dateyymd"; this.d_ymds=new Array(); this.d_ymdt=new Array(); this.d_fymds=new Array(); this.d_syyys=new Array(); //誕生日などの入力用
//
/*	<-↑ 以上はオウンコーディングで変更可能です-> */

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

▲ページの先頭へ


◎validate5.js の利用例

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

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

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


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

▲ページの先頭へ


◎拡張利用のQ&A

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


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


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

▲ページの先頭へ


◎更新履歴

・2017.04.09 SSLのurlをhttps://validate-js.comに切替ました。(Ver5.30)
・2017.04.08 サーバの置換を行ないました。
・2014.06.19 フリガナ自動挿入ツールのバージョンを1.1にアップしました。
・2014.05.21 入力未完/送信タグの切替機能を追加しました。(Ver5.29)
・2013.11.11 当システムのバージョンを 4 から Ver5 にアップしました。
・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 初期(β版)バージョンのサービスを開始しました。

▲ページの先頭へ


◎アナウンス済の情報

  ◎旧ライブラリ( validate4.js )の説明資料はこちらを参照して下さい。

▲ページの先頭へ


◎お問い合わせ

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

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

[運営サイト]
https://validate-js.com/(フォームデータのチェックツール:validate5.js)
https://zipaddr.com/(郵便番号 → 住所の自動入力:zipaddrx.js)無料
http://zipaddr2.com/(郵便番号 → 住所の自動入力:zipaddr3.js)有料

▲ページの先頭へ