【 編集説明 】
■ フォーム html
１. <head>〜</head>の間に
<link rel="stylesheet" href="./js-css/
FFChecker.css" type="text/css"> を記述する。
※ どうしてもjsエラーなる ( jsで cssを読み込む為 アクセス拒否 ) と言う場合はURLで指定してみて下さい。
( 又は、FFChecker.css内記述を <head>〜</head>内に直接記述してみて下さい。※ 同梱 index_fileView.html参照 )
</body> (最下部) の手前に
<script src="./js-css/
FormFChecker.js" type="text/javascript" charset="UTF-8"></script>
※ 利用するformページが UTF-8ではない場合、charset="UTF-8"の付け忘れはしないで下さい。
２. フォームの設定について
はじめに ... formタグに
onkeydown="return FieldKeyCheck(event)" を記述
<form role="form" ... 省略 ...
onkeydown="return FieldKeyCheck(event)">
※ フィールド内での [ Enter ] 対する処置です。( Enterでの送信防止 )
Submitでのチェック ( ※ submit実行時でのチェックが必要ないと言う場合は不要 )
a) formタグに
onsubmit="return SubmiClickOn()" を記述
<form role="form" ... 省略 ... onkeydown="return FieldKeyCheck(event)"
onsubmit="return SubmiClickOn()">
b) <input type="submit" 等のタグに
onClick="return SubmiClickOn()" を記述
<input name="submit" type="submit" value="確認画面へ"
onClick="return SubmiClickOn()">
各フィールドでのチェックと表示 チェックしたいフィールドタグに
class="FField" を記述
( フィールド名 => nputやselect等に設定している name値 )
<div class="formRow">
<div class="from_item formFieldTop">お名前 <font style="font-size:12px">※</font></div>
<div class="from_field formFieldTop">
<span id="fieldMSG_name"></span>
<input type="text"
name="name" value=""
class="FField">
<small id="samp_name">例）山田 太郎</small>
<br
><span id="fieldLengMSG_name" class="field_Msg"></span>
</div>
</div>
下記は、使用しているformに合わせて記述場所を決めて下さい。
1. <span
id="fieldMSG_フィールド名"></span> 吹き出し(ポップアップ) 入力エラー表示用記述
※ 下記 2. のエラーもこちらで表示可能
2. <span
id="fieldLengMSG_フィールド名"></span> Html書込み 個数等エラー表示用記述
<span> 〜 </span>内に文面があれば記載して下さい。 (エラーがあれば書き換えられます。)
※ 上記 1. のエラーもこちらで表示可能
3. <small
id="samp_フィールド名">例）山田 太郎</small>
※ フィールド内に記入例を入れた際に Htmlに記載している記入例を消したい場合に
id="samp_
フィールド名" を記述
Input type="file/checkbox/radio"、Selectフィールドでのチェック
class="FField"と共に、
onChange="FieldClickOn(this)"を記述
<input type="file" ... 省略 ... class="FField" onChange="FieldClickOn(this)">
<select name="select1" ... 省略 ...
class="FField" onChange="FieldClickOn(this)">
<input type="checkbox" ... 省略 ...
class="FField" onChange="FieldClickOn(this)">
<input type="radio" ... 省略 ...
class="FField" onChange="FieldClickOn(this)">
※ onChange="FieldonChange(this)" でもOKです。
又、type="file"は ファイル選択画面にてチェックされてしまうので onChangeの記述は必須となります。
Input type="checkbox/radio" Labelタグを使用している場合でのチェック
class="FField"と共に、Labelタグには
onClick="FieldClickOn(this)"を記述
<input id="checkbox_1" type="checkbox" ... 省略 ...
class="FField">
<label for="checkbox_1" ... 省略 ...
onClick="FieldClickOn(this)"> checkbox1</label>
<input id="radio_1" type="radio" ... 省略 ...
class="FField">
<label for="radio_1" ... 省略 ...
onClick="FieldClickOn(this)">radio1</label>
※ onClick="LabelonClick(this)" でもOKです。
※ Input type="checkbox/radio"でのフィールドエラーカラーについて
checkbox/radioは (Label未使用) boxShadowColorしか反映されない為、
下記を記述すると囲まれた範囲にフィールドエラーカラーが反映されます。
<div
id="fieldErrorColor_フィールド名">
<input type="checkbox" ... 省略 ...
<input type="checkbox" ... 省略 ...
... 省略 ...
</div>
※ 表示状況はサンプルページにてご確認下さい。
年月日( select セット設定 )での曜日表示
<span id="DayWeek_日のフィールド名">(--)</span>
Input type="file"での画像ロード表示
使用しているformに合わせて記述場所を決めて下さい。
<span id="Image_ViewAria_フィールド名"></span>
Submitでの吹き出しエラー表示
使用しているformに合わせて記述場所を決めて下さい。
● デフォルト表示
<div id="fieldMSGSubmit"></div>
● カスタム表示 ( OKボタン等カスタマイズしたい場合 )
<div id="UserSubmitError"> ( サンプルでは読み込まれないよう "__UserSubmitError"としています。 )
<!-- div id="SubmitErrorView">
<div id="SubmitErrorTitle">
#SubmitMsgTitle#</div>
<div id="SubmitErrorMSG">#SubmitErrorMsg#</div><p>
<div align=center><input type=button id="SubmitErrorButton" value=" OK "
title="閉じる"
onclick="SubmitMSGClose();"></div>
</div -->
</div>
※ 赤太文字は必須
■ FormFChecker.js 個人設定
１. Step Style 設定
各StepURLの設定 URLに含む各ステップを判別出来る文字列を設定
const FormStepHref = [
/* step 1 */ '',
/* step 2 */ '\\?step2',
/* step 3 */ '\\?step3'
];
※ [ step 1 ] は空設定で良いですが、状況により設定して下さい。
チェンジStepStyle設定 上記の判定で得た数値(1〜3)が
#StepNo#に置き換えされます。
//#******* チェンジするStepStyleの設定 ( ['セレクター名', 'スタイル'] ) *******
const StepStyleChange = [
[ '.Step_
#StepNo#', 'color: #FFFFFF; ... 省略 ...
※ ご自身で、Stepのスタイルを作成する際は、セレクター名区別にこの数値を入れ記述して下さい。
２. フォームフィールド クラス名
上記 [ フォーム html ] での [ class="FField" ] でのクラス名変更可能
const FClassName = '.FField';
３. 各フィールド条件詳細設定
FCheck => 連想配列のキー値にフィールド名( Field の name値 )、
ハッシュに連想要素を入れ条件設定しています。
var FCheck = {
'
name' : ['お名前', ... 省略 ...
'
name_kana' : ['お名前(カナ)', ... 省略 ...
以下、連想要素の第
1引数〜第
8引数までの
設定説明
1 => フィールドに対する項目名 ( 吹き出しエラーエラー表示時に利用 )
2 => 必須 (
+ disabled解除条件 ) : '1
+select2
.02
+checkbox3
.03'
[ 1=> 必須、0=> 任意 ]
+ [ 解除するフィールド名
. 自身のValue値 (単に入力や選択があれば良い場合 " value ") ]
3 => 文字・選択数制限 : [ 制限数値 ]
. [ 下限エラーNo ]
. [ 上限エラーNo ]
( 上限のみの場合空設定 -> 制限数値
..上限エラーNo )
・ 制限数値指定例 : [ 0
-10 ]=> 10以上のエラー、[ 5
-10 ]=> 5以下 or 10以上のエラー、
[ 2
-2 ]=> 2個必死、[ 20
+20 ]=> 20以下メッセージ or 20以上のエラー (コメント欄等に利用)
4 => 入力一致条件 : 複数指定の場合 [
^^ ] で区切って下さい。
・ お名前(カナ)での設定例 => [
hk^^k ] ひがかな〜カタカナ変換後、カナのチェック
・ 他のフィールドとの一致条件の指定 => [ as ]
- [ フィールド名 ] ( 例 :
as-email -> メールアドレスの再確認 )
・ 独自判定での一致条件の指定 => [ cg ]
- [ 正規表現 ] ( 例 :
cg-^[0-9]{7}$ -> 郵便番号7桁 )
( 判定にコンマ[,]シングルクォーテーション[']を利用したい場合は
16進数 ( それぞれ \\x2c \\x27 ) を指定して下さい。例 :
cg-^[0-9\\x2c]+$ )
・ 以下、JSに組み込まれている変換指定
[
n ] : 全て数字かのチェック
[
y ] : ハイフン [ - ] 含む郵便番号チェック ( 3桁 - 4桁 )
[
t ] : ハイフン [ - ] 含む電話番号チェック ( 2〜5桁 - 1〜4桁 - 4桁 )
[
u ] : URL形式のチェック
[
m ] : メールアドレス形式のチェック
[
i ] : 全て英数字または [ _ ] [ - ] かのチェック (簡易パスワード等のチェック)
[
p ] : パスワードのチェック ( 英字大文字小文字及び記号が含まれているかのチェック )
[
z ] : 全角チェック (名前等々 ※ 全角空白又は全半角空白連続は半角空白1文字変換);
[
k ] : 全角カナチェック (名前カナ等々 ※ 全角空白又は全半角空白連続は半角空白1文字変換);
[
h ] : 全角かなチェック (名前かな等々 ※ 全角空白又は全半角空白連続は半角空白1文字変換);
[
zh ] : 全角〜半角変換 (数字入力フォーム等)
[
kh ] : 全角カナ〜かな変換
[
hk ] : 全角かな〜カナ変換
5 => エラー吹き出し位置・カラー : ( 全てカンマ [
. ] 区切り )
[ 吹き出し矢の向き b=>下、l=>left t=>上 ]
. [ top px ]
. [ left px ]
. [ width px (or auto) ]
.
( 以降個別に色を指定したい場合=> backgroundColor
. borderColor
. textColor )
6 => 入力例題 : テキストフィールド記入例を表示したい場合、記入例を記述
7 => 年月日条件 : [
year.mon.day ] ( 年・月・日のフィールド名をカンマ [
. ] 区切りでセット設定、以降もカンマ区切り )
. [
1 -> dayフラグ、
2 -> フラグ or Now日付表示、
3〜年数 -> フラグ or Now日付表示 or 西暦自動書込 ]
. [
1 -> 過去年月日のカット ]
. [ 年(等々)西暦自動書込の際text値に入れたい文字があれば ... ]
※
3〜年数 => [
7 ] を設定すると、5年分の西暦を自動書き込み
FileUP条件 : [ファイル容量上限 kb単位]
. [エラー番号]
+ [幅上限]
. [高さ上限]
. [エラー番号2]
. [プリント幅サイズ(高さは自動)]
. [ プリント高さサイズ(自動にしたく無い場合) ]
. IE11にてPromise オブジェクト利用可能な場合は [
1 ]
※ [エラー番号]
+ 以降の設定は、画像ファイルロードに対する設定となります。( Promise 使用 )
※ [エラー番号2] は、基本的に空設定で設定不要です。
8 => disabled設定 : 上記 [
2 =>] でのdisabled解除条件に対する対象フィールドに [ '
d' ] を設定
４. フォームフィールド エラー設定
const DoubleError = 0; => [ 0 ] 下記設定による分別表示、[ 1 ] 全エラーを両方(吹出・書込)に表示
const PopUpViewError = 2; => 吹出 : [ 0 ] 非表示、[ 1 ] 表示、[ 2 ] 表示 or フィールドエラーカラー
const HtmlPrintError = 2; => 書込 : [ 0 ] 非表示、[ 1 ] 表示、[ 2 ] 表示 or フィールドエラーカラー
５. 吹き出しエラーメッセージ設定
● 下記配列、0〜3は 上記 [
2 => 必須 ]での [
1 ] 設定における固定メッセージ
const ErrorMessaEnd = [
/* 0 */ '記入がありません。',
/* 1 */ '記入形式に間違いがあります。',
/* 2 */ '選択がありません。',
/* 3 */ 'と一致しませんでした。',
/*
4 */ '同意をお願い致します。' -> [
4 => 入力一致条件 ] での 必須 [ 4 ] 設定に対する追加設定メッセージ
];
※ 追加設定例 => 'agree' : ['個人情報の取り扱い', '
4', ... 省略 ...
( 通常、必須設定は [ 1 ]ですが、個別に設定したい場合は、4以降を設定し対象引数を配列に追加して下さい。 )
● 項目名に対する設定
//# エラーしたフィールド項目名の囲い
//#
const ErrorNameTag = [1, '" ', ' " ' ];
※ [ 0 設定でエラーに項目名を付けない ( 但し、Submitでは付加 ) , ダブルクォーテーションで囲む設定 , 〃 ]
６. HTML書込み エラーメッセージ ( 基本形的には、文字数・選択数に対するエラーメッセージ表示 )
● 下記、0〜8 [
3 => 文字・選択数制限 ] での [ 上下限エラーNo ]
var FieldLengMessa = [
/* 0 */ '指定文字数に達していません。',
/* 1 */ '指定文字数を超えました。',
/* 2 */ 'あと全角
#LEN_Z#文字までです。',
/* 3 */ '指定文字数から全角
#LEN_Z#文字超えました。',
/* 4 */ '選択指定数に達していません。',
... 中省略 ...
/* 7 */ '指定ファイル数を超えました。',
/* 8 */ '指定容量が
#LEN#KB程超えていました。',
/* 9 */ ''
];
//# ※
#LEN# -> 個数又は半角数、
#LEN_Z# -> 全角数に置き換えられます。
● メッセージ変更は、文字列の書き換えか、9以降にて追加設定。
尚、99(ファイル サイズエラー専用 ) 〜 101までは、固定メッセージが設定されています。
７. Submit(button) 実行時の入力エラー表示設定
● 下記にて、Submit(button)実行時での各フィールド吹出・書込エラー表示設定
//#*** 上記の吹き出し・文字数・選択数エラーの表示方法 *****
//#
const sErrorMessaTime = 0; // 上記の各フィルド吹き出しエラーメッセージの表示秒数 1/1000秒
//# 吹出表示 設定例: [ 3000 ] -> 3秒間表示、[ 0 ] -> 自動的に消さない、[ -1 ] -> Submit時には非表示
//#
const sHtmlPrintError = 2;
//# 書込表示 設定例: [ 1 ] -> 表示、[ 2 ] -> 表示 or フィールドエラーカラー、 [ 0 ] -> 非表示
※ [ -2 ] -> フィールドエラーカラーのみ
● Submit(button) 専用 吹き出しエラー設定
const SubmitMsgView = 2; // [1] -> 下記
メッセージ設定表示、[2] -> 各フィールドエラー表示、[ 0 ] -> 非表示
//#
//# タイトル
const SubmitMsgTitle = '入力情報に不備があるようです。';
//#
//#
メッセージ
const SubmitMsgValue = '入力情報を修正後、再度 [ 確認画面 ] ボタンを押して下さい。';
● Submit吹き出し表示のスクロールについて
const AreaHeightType = 0; // もしスクロールにて移動しない場合 [ 1 or 2 ]で試して下さい。
※ 設置する htmlのDOCTYPE宣言記述状況にて一部のheight値の取得方法を変えていますが
もしスクロール移動しないようでありましたら、AreaHeightType設定にてお試し下さい。
８. 個人設定その他
● 下記の「以下、サンプルフォーム用」より下部の関数は不要です。
ご利用の際は、不要部分を抹消し、
その上記にある function MobileViewProcess(){ } のコメントアウト(
/*、
*/ )を外して下さい。
この関数には、もしモバイル用等に何か処理をしたい場合記述して下さい。( onload、onresize時に処理 )
注意： もし個人設定での設定値を変更したい場合は、[
const Xxxxx ] は、[
var Xxxxx ] として下さい。
/*
//###############################################################################
function MobileViewProcess(){
}
//###############################################################################
*/
//###############################################################################
//################### 以下、サンプルフォーム用 ##################
//###############################################################################
function MobileViewProcess(){
因みにサンプルフォーム用に記述している内容は、「簡易モバイル表示」でのフォーム2分割に伴い、
フォーム及び、[ 各フィールド条件詳細設定 ] での FCheckデータにおいて不要となる記述の削除処理をしています。
注意： FCheckは [ var FCheck ] なっていますがこの処理だけの為ではありませんので [ const ] に変更はしないで下さい。
}
