【オリジナルフォーム】入力チェックの設定について
■目的 
オリジナルフォームの入力チェックの設定についての説明

■セット所要時間 
10分

■セットの流れ
下記フォームサンプルページを元に説明します。 
フォームサンプルページのソースコードをブラウザ上でご確認いただくか、ファイルをダウンロードして内容をご確認ください。
フォームサンプルページ>
フォームサンプルダウンロード>

※ソースコード確認方法
対象ページをChromeブラウザで開いて下記操作を行ってください。

windows:Ctrl + U
mac:option + command + U




(1)必要ファイルは4つ
下記4ファイルを<head>内で読み込んでください。
(※ECAIのテンプレートを使用している場合、すでに設置されています。)
・jquery本体
・validationEngine.css
・validationEngine.js
・日本語化ファイル



(2)回答のclassに”validate[required]”を指定
※data-prompt-positionでアラート表示の位置を調整できます。



ガイドの内容はあくまでもサンプルになります。  そのまま使用できない場合は対応するフォームにあわせての編集をお願いします。   表示設定が正常にできない場合、ソースチェックの有償サポートも行っております。  ご希望の場合は設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。
【フォーム】2回目の申請をクッキー(アクセス履歴)を使って制限する
オリジナルフォーム(LIFF)による申請後に、2回目のアクセスに対して申請をできないようにします。
ブラウザに申請済みのクッキーを保持し判別するようにします。
サンプルページをダウンロードし、設定を進めて下さい。


下記フォームサンプルページのソースコードと併せてご確認いただくとわかりやすいです。
> フォームサンプルページ
> 送信完了サンプルページ
DL:フォームサンプルページ

※ソースコード確認方法
windows:Ctrl + U
mac  :option + command + U



(1)サンプルファイル内にあるjs.cookie.min.jsをjsファイルに格納
(2)index.htmlのhead部分に下記を追加
サンプルコード(コピー&ペースト用)
<script src="js/js.cookie.min.js"></script>
<script>
	//アクセス制限
	$(function() {
		const applied = Cookies.get('applied');
		if(applied){
			$(".wrap").css('display','none');
			$(".wrap.applied").show();
		}
		return false;
	});
</script>


(3)index.htmlのbody内に制限時の表示を追加
テキストの内容などは適宜変更下さい。
クッキーがある場合にこちらが表示されます。
サンプルコード(コピー&ペースト用)
<div class="wrap applied" style="display: none;">
	<section class="title">
		<h2>エントリー受付</h2>
	</section>

	<section class="complete">
		<p>恐れ入りますが、24時間は再申請できかねます。<br>エントリーにつきましては、24時間経ってから<br>手続きをお願い致します。</p>
		<div class="btn">
			<a class="blue" onclick="liffclose();">内容を確認したので閉じる</a>
		</div>
	</section>
</div>


(4)complete.htmlのhead部分に下記を追加
サンプルコード(コピー&ペースト用)
<script src="js/js.cookie.min.js"></script>


(5)complete.htmlのbody閉じの上部分に下記を追加
使用するクッキーの保持のコメントアウト「//」を解除し、元の58行目はコメントアウトしてください。
サンプルコード(コピー&ペースト用)
//クッキーセット
Cookies.set('applied', '申請中', {expires: 1/( 24 * 60 * 6)} );//10秒保持
// Cookies.set('applied', '申請中', {expires: 1/( 24 * 60)} );//1分保持
// Cookies.set('applied', '申請中', {expires: 1/ 24} );//1時間保持
// Cookies.set('applied', '申請中', {expires: 1});//1日保持
新機能#48┃応答メッセージの配信回数を設定できるようになりました!

応答メッセージの配信回数を設定できるようになりました!

■目的
1ユーザーに対し、複数回表示したくない応答メッセージを指定回数のみ表示させることが可能。
何度も同じ応答を繰り返すとロボットが応対しているようにユーザーに思われてしまうため、回数指定することで人間が応対しているかのように思わせることができる。

■セット所要時間
1分

■セット箇所
メッセージ>応答メッセージ>編集>高度な設定>配信回数を設定する

応答メッセージの新規作成方法はこちら>



■補足
・「配信回数を設定する」回数入力の範囲は1~100となります。

・ユーザーの配信回数をリセットすることはできません。
 一度配信されなくなったユーザーに配信を行いたい場合、「配信回数を設定する」のチェックを外すか、回数入力を増やす必要があります。

・キーワード設定ありの応答メッセージに回数制限をすると、回数を超えた際にキーワード設定無しの応答メッセージが配信されます。
 ※キーワード設定無しの応答メッセージ設定が無い場合は何も配信されなくなります

・キーワード設定無しの応答メッセージに回数制限をすると、回数を超えた際に何も配信されなくなります。

指定タグの人にはオリジナルフォームを表示しない
指定のタグが付いているユーザーのオリジナルフォームを表示させない方法です。
フォームの回答に回数制限をつけたいときなどに有効です。

下記フォームサンプルページを元に説明します。
ファイルをダウンロードして内容をご確認ください。
フォームサンプルダウンロード>
フォームサンプルページ>

※ソースコード確認方法
対象ページをChromeブラウザで開いて下記操作を行ってください。
windows:Ctrl + U
mac:option + command + U

※PCのブラウザで開いても正常に動作しません。


■処理の流れ
①ローディング表示
↓
②指定のタグがあるかチェック
↓
③指定のタグがある場合はフォームを閉じます


■編集ファイル:index.html

(1)ローディングの初期設定
フォームアクセス時に、指定タグの情報を問い合わせている間、ローディング画面を表示させる必要があります。
推奨のローディング設定をする場合は、既存のローディング設定を削除(コメントアウト)してください。
(※既存のローディング設定をそのまま使って組み込むことも可能です。)


例)
//loader
// $(window).on('load', function () {
// 	$("#loader").addClass('loaded');
// });
// $(function () {
// 	setTimeout(function () {
// 		$("#loader").fadeOut();
// 	}, 5000);
// });

<!-- <div id="loader">
	<div class="line-scale">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</div>
</div> -->
(2)ローディング用のスタイル追加
backgroundのURLにローディング用の画像パスを設定
<style>
	/* ローディング用 */
	header,
	.wrap,
	footer{
	display: none;
	}

	#nowLoading {
	display: table;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background-color: #fff;
	opacity: 0.8;
	}
	
	#innerMsg {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	padding-top: 140px;
	z-index:100;
	background: url("./images/loading_cl.svg") center center no-repeat;
	}
</style>
(3)ローディング画像の設定
<script>
	//ローディング画像表示
	function dispLoading(msg){
		// 引数なしの場合、メッセージは非表示。
		if(msg === undefined ) msg = "";
		
		// 画面表示メッセージを埋め込み
		var innerMsg = "<div id='innerMsg'>" + msg + "</div>";  
		
		// ローディング画像が非表示かどうかチェックし、非表示の場合のみ出力。
		if($("#nowLoading").length == 0){
			$("body").append("<div id='nowLoading'>" + innerMsg + "</div>");
		}
	}
	
	//ローディング画像非表示
	function removeLoading(){
		$("#nowLoading").fadeOut();
		$("header, .wrap, footer").show();
	}

	dispLoading();
</script>
(4)タグチェックの非同期処理の設置
※フォームアクセス時のテキストはこちらで変更可
//タグチェック
function CheckTagProc() {
	var uid = $("#useridfield").val();
	var fid = $("#fid").val();
	var tag = $("#check_tags").val();
	var botid = $("#bot_id").val();
	$.ajax({
		type: "POST",
		url: "/api/tag/chk",
		dataType: 'json',
		data: {
		"uid": uid,
		"fid": fid,
		"bot_id": botid,
		"tag_code": tag
		},
		success: function(j_data) { if (j_data['result'] == 'Granted'){alert("こちらのフォームは回答済みです。");liffclose();} },
		error: function(XMLHttpRequest, textStatus, errorThrown) {
		},
		complete: function() {removeLoading();}
	});
}
//■Response
//error_code 正常な場合は「200」、指定されたタグが存在しない・会員情報が存在しない等の場合は「500」
//result error_codeが500の場合は「ParamMissing」、指定タグコードが付与済みの場合は「Granted」、指定タグコードが未付与の場合は「NotGranted」
(5)非同期処理のコール処理を追加
(6)指定のタグを設置
valueにタグを指定、複数の場合は「,」で区切る
(7)指定のタグがあるユーザーがフォームを開くと、アラート表示後に閉じます。
オリジナルフォームの入力制限について
validationEngineというプラグインを使用しています。
公式ページ>

使用例は公式ページ以外に、日本語での説明サイトも多数あります。
そちらも併せて参照下さい。

弊社フォームサンプル
フォームサンプルページフォームサンプルダウンロード>

※ソースコード確認方法 
サンプルページをChromeブラウザで開いて下記操作を行ってください。
windows:Ctrl + U 
mac:option + command + U 


■必須入力にする
対象のinputのclassに下記を設定
class="validate[required]" 


■文字数制限
対象のinputのclassに下記を設定
class="validate[required,minSize[15]]"
※例は15文字制限ですが、適宜ご変更下さい。

LIFF(オリジナルフォーム)の入力を1ユーザー1回に制限することは可能か?

2つの方法があります。

①リッチメニューによる制限
LIFFのURLをリッチメニューをタップして開かせる方法にして、申請後にタグ付与して別のリッチメニューに変えることでオリジナルフォームの入力を1回に制限することが可能です。
LIFFのURLを直接ユーザーに表示させないことで再申請できなくする方法になります。
※LIFF自体に回数の制限を設けることはできません


②オリジナルフォームによる制限
指定タグの人にはオリジナルフォームを表示しない>

【オリジナルフォーム】入力制限をなくす方法
■目的
オリジナルフォームの入力制限(必須入力)をなくす方法の説明になります。

入力制限については、「jQuery-Validation-Engine」というプラグインを入れています。
公式サイトはこちら>

■セット所要時間
3分

■セットの流れ
入力フォームの「input」タグについている「class="validate[required]"」を削除する。

フォームの編集方法はこちら>


またその他の入力制限を行いたい場合は、
「jQuery-Validation-Engine」を検索いただくと日本語の説明サイトも複数ありますので、そちらを参考に設定をお願いします。


ガイドの内容はあくまでもサンプルになります。  そのまま使用できない場合は対応するフォームにあわせての編集をお願いします。   表示設定が正常にできない場合、ソースチェックの有償サポートも行っております。  ご希望の場合は設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。