https://www.matsuai.co.jp/contact/form/form.js

1
2// indexにて、confirmから帰ってきた「送信してたデータ」を復旧する
3$(document).ready(function(){
4	if( form_id ){ // 対象フォームのIDはconfirm.phpからPOSTで返ってきてindex.phpで受信する
5		var $form = $('form#'+form_id); 
6		for(target in data_name){ 
7			var $element = $form.find('*[name="'+data_name[target]+'"]');
8			var tagName  = $element[0].tagName;   // HTMLタグ INPUT, SELECT, TEXTAREA
9			var elm_type = $element.attr('type'); // INPUTに指定したtype="" radio, checkbox
10			var value = eval(data_name[target]+"Data"); // confirmから返ってきた値 
11			if( !value ) continue;
12
13			if( tagName == 'SELECT' ){ $element.val( value ).attr("selected","selected"); continue; }
14			if( tagName == 'TEXTAREA' ){ $element.html( value ); continue; }
15			if( elm_type == 'radio' || elm_type == 'checkbox' ){ $form.find('*[name="'+data_name[target]+'"][value="'+value+'"]').attr("checked","checked"); continue; }
16			$element.val( value );
17		}
18	}
19});
20
21//入力内容チェック
22function teraformConfirm(submit_button){
23	var form_errors = []; // そのフォームで起きたエラー [ name, name ... ] という配列になる
24	var $form = $(submit_button.form);
25	
26	// エラー表示をクリア
27	$form.find('p.validation-error').remove()
28	$form.find('.validation-error').removeClass('validation-error');
29
30	// バリデーション
31	for(let index in data_name){
32		var element_errors = {}; // その要素で起きたエラー { required : '○○が入力されていません' } という配列になる
33		var name = data_name[index];
34		var title = data_name2[index]; 
35		var condition = data_type[index];
36		var $element = $form.find('*[name="'+name+'"]');
37		if( $element.length == 0 ){ console.log('[name="'+name+'"]というエレメントがありません'); return false; } 
38		var tagName  = $element[0].tagName;
39
40		if( condition.indexOf("require") > -1 && $element.val() == "" ){
41				element_errors['require'] = "※"+title+"が入力されていません。</p>";
42		}
43		if( condition.indexOf("require") > -1 && $element.val() == "" && tagName == 'SELECT' ){
44				element_errors['require'] = "※"+title+"が選択されていません。</p>";
45		}
46		if( condition.indexOf("require") > -1 && ( $element.attr('type') == 'radio' || $element.attr('type') == 'checkbox' ) ){
47			  var $checked = $($element.selector+':checked');
48				if( $checked.length == 0 ){
49					element_errors['require'] = "※"+title+"が選択されていません。</p>";
50				}
51		}
52		if( condition.indexOf("require") > -1 && condition.indexOf("url") > -1 && $element.val() == 'http://' ){
53				element_errors['require'] = "※"+title+"が入力されていません。</p>";
54		}
55
56		if( condition.indexOf("tel") > -1 && $element.val() && ! $element.val().match(/^[0-9]{10,12}$|^[0-9-]{12,13}$/) ){
57				element_errors['tel'] = "※"+title+"に半角0～9とハイフン以外の文字があるか桁数が足りません（市外局番からご入力ください）。</p>";
58		}
59		if( condition.indexOf("mail") > -1 && $element.val() && !$element.val().match(/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/) ){
60				element_errors['mail'] = "※"+title+"がメールアドレスとして正しくありません。</p>";
61		}
62		// 複数行のメールアドレスをチェック
63		if( condition.indexOf("ml-multi") > -1 ){
64				var match = 1;
65				$element.val().split(/\r\n|\r|\n/).forEach(function(val){
66					if( val && !val.match(/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/) ) match = 0;
67				});
68				if( match == 0 ){
69					element_errors['mail'] = "※"+title+"がメールアドレスとして正しくありません。</p>";
70				}
71		}
72		if( condition.indexOf("url") > -1 && $element.val() && $element.val()!='http://' && !$element.val().match(/^(https?:|ftp:)?(\/\/[-_.!~*\'()a-zA-Z0-9;\/?:\@&=+\$,%#]+)?$/) ){
73				element_errors['url'] = "※"+title+"がURLとして正しくありません。</p>";
74		}
75		if( condition.indexOf("hankaku") > -1 && $element.val() && $element.val().match(/[^\x01-\x7E\xA1-\xDF]/) ){
76				element_errors['hankaku'] = "※"+title+"は半角文字だけでご入力ください。</p>";
77		}
78		if( condition.indexOf("zenkaku") > -1 && $element.val() && ! $element.val().match(/[a-zA-Z0-9\uFF65-\uFF9F]+/) ){
79				element_errors['zenkaku'] = "※"+title+"は全角文字だけでご入力ください。</p>";
80		}
81		if( condition.indexOf("katakana") > -1 && $element.val() && ! $element.val().match(/^[ァ-ン　ー]+$/) ){
82				element_errors['katakana'] = "※"+title+"は全角カナ文字だけでご入力ください。</p>";
83		}
84		if( condition.indexOf("pair") > -1){
85			  // 同じ pair番号 を振られたエレメントのvalueを連結
86			  var cond = teraformFetchType( 'pair', condition );
87				var vals = '';
88				for( i in data_type ){
89					var elm = $form.find('*[name="'+data_name[i]+'"]');
90					// radio, checkbox は  checked に限定する
91					if( elm.attr('type') == 'checkbox' || elm.attr('type') == 'radio' ) elm = $form.find('*[name="'+data_name[i]+'"]:checked');
92					if( data_type[i].indexOf(cond) >= 0 ) vals += elm.val() ? elm.val() : '';
93				}
94				if( vals.length == 0 ){
95					element_errors['pair'] = "※"+title+"は1つ以上入力してください。</p>";
96				}
97		}
98		if( condition.indexOf("confirm") > -1){
99			var cond = teraformFetchType( 'confirm', condition ).split('-')[1]; // confirm-mail から mail を抽出
100			if( !cond ){ console.log('confirm-<name>と指定してください'); return false; } 
101			var $element2 = $form.find('*[name="'+cond+'"]');
102			if( $element2.length == 0 ){ console.log('confirm-<name>に指定された'+cond+'が見つかりません'); return false; } 
103			if( $element2.length == 0 || $element.val() != $element2.val() ){
104				element_errors['confirm'] = "※"+data_name2[data_name.indexOf(cond)]+"と"+title+"が一致しません。</p>";
105			}
106		}
107
108// 上記に該当しない特殊条件
109		// 例）あるチェックボックスが選ばれているときだけ、それに付随したテキスト欄を必須に
110		//if( $('#dn-c-4').prop('checked') && name == 'domain_other' && $element.val() == "" ){
111		//	element_errors['require'] = "※"+title+"をご入力ください。</p>";
112		//}
113
114		// 1回以上エラーが発生していたら、メッセージ表示とクラスを付与し、フォームエラーを追加
115		for( let key in element_errors ){
116			// エラーを表示するコンテナはその親だけど、radioとcheckboxだけさらにその親
117			$parent = $element.parent();
118			if( $parent.hasClass('radio') ) $parent = $parent.parent();
119			// 同じタイプのエラーがまだ表示されてない場合のã

119¿ã€ã‚¨ãƒ©ãƒ¼ãƒ¡ãƒƒã‚»ãƒ¼ã‚¸ã‚’出力する
120			if( $parent.find('.'+key+'-error').length == 0 )
121				$parent.append( "<p class='validation-error "+key+"-error'>"+element_errors[key]+"</p>" );
122			// 入力エレメントにエラークラス付与
123			$element.addClass('validation-error');
124			form_errors.push(name);
125		}
126
127	} // end_for
128
129  // フォームに1つでもエラーがあれば、スクロールして、送信をキャンセル
130	if( form_errors.length > 0 ){
131		  var top = 99999;
132			for( var name of form_errors ){ top = Math.min( top, $('*[name="'+name+'"]').offset().top )}
133			$('body,html').animate({scrollTop:top}, 500);
134			return false;
135	}
136
137  // 送信する
138	return true;
139}
140
141function teraformBack(submit_button){
142	var form_errors = []; // そのフォームで起きたエラー [ name, name ... ] という配列になる
143	var $form = $(submit_button.form);
144	
145	submit_button.form.mode.value = 'back';
146	teraformAppendFormValue($form,'form_id',$form.attr("id")); 
147	$form.attr("action",script_index);
148	$form.submit();
149}
150
151// バリデーション条件の中からキーワードにマッチする条件を取り出す
152// ("mail mail_confirm pair1" から pair にマッチする pair1 を返す)
153function teraformFetchType(pattern,condition){
154	for( type of condition.split(' ') ){
155		if( type.indexOf(pattern) >= 0 ) return type;
156	}
157}
158
159// フォームにhidden要素を追加する。
160// 「あらかじめhiddenを設置する」という動作条件を減らすため
161function teraformAppendFormValue($form,name,value){
162	$form.append( 
163		$('<input />').attr('type','hidden').attr('name',name).attr('value',value)
164		.prop('outerHTML')
165	);
166}
167function submitForm($form){
168	$form.submit( );
169}
170