https://kashiwakurake.jp/js/mailform-js.php

1
2/*--------------------------------------------------------------------------
3	
4	Script Name : Responsive Mailform
5	Author : FIRSTSTEP - Motohiro Tani
6	Author URL : https://www.1-firststep.com
7	Create Date : 2014/03/25
8	Version : 4.1
9	Last Update : 2017/03/24
10	
11--------------------------------------------------------------------------*/
12
13
14var mailform_dt    = $( 'form#mail_form dl dt' );
15var start_time     = 0;
16var stop_time      = 0;
17var writing_time   = 0;
18var confirm_window = 1;
19
20
21
22
23function slice_method( el ) {
24	var dt         = el.parents( 'dd' ).prev( 'dt' );
25	var span_start = dt.html().indexOf( '</span>' );
26	var span_end   = dt.html().lastIndexOf( '<span' );
27	var dt_name    = dt.html().slice( span_start+7, span_end );
28	dt_name        = dt_name.replace( /<br>|<br \/>/gi, "" );
29	return dt_name;
30}
31
32
33
34
35function error_span( e, dt, comment, bool ) {
36	if ( bool == true ) {
37		var m = e.parents( 'dd' ).find( 'span.error_blank' ).text( dt + 'が' + comment + 'されていません' );
38	} else {
39		var m = e.parents( 'dd' ).find( 'span.error_blank' ).eq(0).text( '' );
40	}
41}
42
43
44
45
46function compare_method( s, e ) {
47	if ( s > e ) {
48		return e;
49	} else {
50		return s;
51	}
52}
53
54
55
56
57function hidden_append( name, value ){
58	$( '<input />' )
59		.attr({
60			type: 'hidden',
61			id: name,
62			name: name,
63			value: value
64		})
65		.appendTo( $( 'p#form_submit' ) );
66}
67
68
69
70
71function required_check() {
72	
73	var error        = 0;
74	var scroll_point = $( 'body' ).height();
75	var required_dd  = $( 'dd.required' );
76	
77	
78	for ( var i = 0; i < required_dd.length; i++ ) {
79		if ( required_dd.eq(i).find( 'input' ).length ) {
80			
81			var elements = required_dd.eq(i).find( 'input' );
82			var dt_name  = slice_method( elements.eq(0) );
83			
84			if ( elements.eq(0).attr( 'type' ) == 'radio' || elements.eq(0).attr( 'type' ) == 'checkbox' ) {
85				
86				var list_error = 0;
87				for ( var j = 0; j < elements.length; j++ ) {
88					if ( elements.eq(j).is( ':checked' ) == '' ) {
89						list_error++;
90					}
91				}
92				
93				if ( list_error == elements.length ) {
94					error_span( elements.eq(0), dt_name, '入力', true );
95					error++;
96					scroll_point = compare_method( scroll_point, elements.eq(0).offset().top );
97				} else {
98					error_span( elements.eq(0), dt_name, '', false );
99				}
100				
101			} else {
102				
103				if ( elements.eq(0).val() == '' ) {
104					error_span( elements.eq(0), dt_name, '入力', true );
105					error++;
106					scroll_point = compare_method( scroll_point, elements.eq(0).offset().top );
107				} else {
108					error_span( elements.eq(0), dt_name, '', false );
109				}
110				
111			}
112		}
113		
114		
115		if ( required_dd.eq(i).find( 'select' ).length ) {
116			var elements = required_dd.eq(i).find( 'select' );
117			var dt_name  = slice_method( elements.eq(0) );
118			if ( elements.eq(0).val() == '' ) {
119				error_span( elements.eq(0), dt_name, '入力', true );
120				error++;
121				scroll_point = compare_method( scroll_point, elements.eq(0).offset().top );
122			} else {
123				error_span( elements.eq(0), dt_name, '', false );
124			}
125		}
126		
127		
128		if ( required_dd.eq(i).find( 'textarea' ).length ) {
129			var elements = required_dd.eq(i).find( 'textarea' );
130			var dt_name  = slice_method( elements.eq(0) );
131			if ( elements.eq(0).val() == '' ) {
132				error_span( elements.eq(0), dt_name, '入力', true );
133				error++;
134				scroll_point = compare_method( scroll_point, elements.eq(0).offset().top );
135			} else {
136				error_span( elements.eq(0), dt_name, '', false );
137			}
138		}
139	}
140	
141	
142	if ( $( 'input#mail_address' ).length ) {
143		var element = $( 'input#mail_address' );
144		var dt_name = slice_method( element );
145		if( element.val() != '' && ! ( element.val().match(/^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$/) ) ) {
146			element.parents( 'dd' ).find( 'span.error_format' ).text( '正しい' + dt_name + 'の書式ではありません。' );
147			error++;
148			scroll_point = compare_method( scroll_point, element.offset().top );
149		} else {
150			element.parents( 'dd' ).find( 'span.error_format' ).text( '' );
151		}
152	}
153	
154	
155	if ( $( 'input#mail_address_confirm' ).length ) {
156		var element   = $( 'input#mail_address_confirm' );
157		var element_2 = $( 'input#mail_address' );
158		var dt_name   = slice_method( element );
159		
160		if( element.val() != '' && ! ( element.val().match(/^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$/) ) ) {
161			element.parents( 'dd' ).find( 'span.error_format' ).text( '正しい' + dt_name + 'の書式ではありません。' );
162			error++;
163			scroll_point = compare_method( scroll_point, element.offset().top );
164		} else if ( element.val() != '' && element.val() !== element_2.val() ) {
165			element.parents( 'dd' ).find( 'span.error_format' ).text( dt_name + 'が一致しません。' );
166			error++;
167			scroll_point = compare_method( scroll_point, element.offset().top );
168		} else {
169			element.parents( 'dd' ).find( 'span.error_format' ).text( '' );
170		}
171	}
172	
173	
174	
175	
176	if ( error == 0 ) {
177		
178		if ( confirm_window == 1 ) {
179			if ( window.confirm( '送信してもよろしいですか？' ) ) {
180				send_setup();
181				order_set();
182				send_method();
183			}
184		}
185		
186	} else {
187		$( 'html, body' ).animate({
188			scrollTop: scroll_point - 70
189		}, 500 );
190	}
191	
192}
193
194
195
196
197function send_setup() {
198	
199	hidden_append( 'javascript_action', true );
200	
201	var now_url = encodeURI( document.URL );
202	hidden_append( 'now_url', now_url );
203	
204	var before_url = encodeURI( document.referrer );
205	hidden_append( 'before_url', before_url );
206	
207	hidden_append( 'writing_time', writing_time );
208	
209}
210
211
212
213
214function order_set() {
215	
216	var order_number = 0;
217	for ( var i = 0; i < mailform_dt.length; i++ ) {
218		
219		if ( mailform_dt.eq(i).next( 'dd' ).find( 'input' ).length ) {
220			var elements = mailform_dt.eq(i).next( 'dd' ).find( 'input' );
221			var dt_name  = slice_method( elements.eq(0) );
222			
223			if ( elements.eq(0).attr( 'type' ) == 'radio' || elements.eq(0).attr( 'type' ) == 'checkbox' ) {
224				
225				var list_error = 0;
226				for ( var j = 0; j < elements.length; j++ ) {
227					if ( elements.eq(j).is( ':checked' ) == '' ) {
228						list_error++;
229					}
230				}
231				
232				if ( list_error != elements.length ) {
233					var attr_name = elements.eq(0).attr( 'name' ).replace( /\[|\]/g, "" );
234					order_number++;
235					hidden_append( 'order_' + order_number, attr_name + ',' + dt_name );
236				}
237				
238			} else {
239				
240				if ( elements.eq(0).val() != '' ) {
241					order_number++;
242					hidden_append( 'order_' + order_number, elements.eq(0).attr( 'name' ) + ',' + dt_name );
243				}
244				
245			}
246		}
247		
248		
249		if ( mailform_dt.eq(i).next( 'dd' ).find( 'select' ).length ) {
250			var elements = mailform_dt.eq(i).next( 'dd' ).find( 'select' );
251			var dt_name  = slice_method( elements.eq(0) );
252			if ( elements.eq(0).val() != '' ) {
253				order_number++;
254				hidden_append( 'order_' + order_number, elements.eq(0).attr( 'name' ) + ',' + dt_name );
255			}
256		}
257		
258		
259		if ( mailform_dt.eq(i).next( 'dd' ).find( 'textarea' ).length ) {
260			var elements = mailform_dt.eq(i).next( 'dd' ).find( 'textarea' );
261			var dt_name  = slice_method( elements.eq(0) );
262			if ( elements.eq(0).val() != '' ) {
263				order_number++;
264				hidden_append( 'order_' + order_number, elements.eq(0).attr( 'name' ) + ',' + dt_name );
265			}
266		}
267		
268	}
269	
270	
271	hidden_append( 'order_count', order_number );
272	
273}
274
275
276
277
278function send_method() {
279	
280	$( '<div>' )
281		.addClass( 'loading-layer' )
282		.appendTo( 'body' )
283		.css({
284			'width': $( window ).width() + 'px',
285			'height': $( window ).height() + 'px',
286			'background': 'rgba( 0, 0, 0, 0.7 )',
287			'position': 'fixed',
288			'left': '0',
289			'top': '0',
290			'z-index': '999',
291		})
292		.append( '<span class="loading"></span>' );
293	
294	setTimeout(function(){
295		
296		var form_data = new FormData( $( 'form#mail_form' ).get(0) );
297		
298		$.ajax({
299			type: $( 'form#mail_form' ).attr( 'method' ),
300			url: $( 'form#mail_form' ).attr( 'action' ),
301			cache: false,
302			dataType: 'html',
303			data: form_data,
304			contentType: false,
305			processData: false,
306			
307			success: function( res ) {
308				$( 'div.loading-layer, span.loading' ).remove();
309				var response = res.split( ',' );
310				if( response[0] == 'send_success' ){
311					window.location.href = response[1];
312				} else {
313					response[1] = response[1].replace( /<br>|<br \/>/gi, "\n" );
314					window.alert( response[1] );
315				}
316			},
317			
318			error : function( res ) {
319				$( 'div.loading-layer, span.loading' ).remove();
320				window.alert( '通信に失敗しました。\nページの再読み込みをしてからもう一度お試しください。' );
321			}
322		});
323		
324	}, 1000);
325	
326}
327
328
329
330
331(function( $ ) {
332	
333	for ( var i = 0; i < mailform_dt.length; i++ ) {
334		if ( mailform_dt.eq(i).next( 'dd' ).attr( 'class' ) == 'required' ) {
335			$( '<span/>' )
336				.text( '必須' )
337				.addClass( 'required' )
338				.prependTo( $( mailform_dt.eq(i) ) );
339		} else {
340			$( '<span/>' )
341				.text( '任意' )
342				.addClass( 'optional' )
343				.prependTo( $( mailform_dt.eq(i) ) );
344		}
345		
346		$( '<span/>' )
347			.addClass( 'error_blank' )
348			.appendTo( mailform_dt.eq(i).next( 'dd' ) );
349	}
350	
351	
352	if ( $( 'input#mail_address' ).length ) {
353		$( '<span/>' )
354			.addClass( 'error_format' )
355			.appendTo( $( 'input#mail_address' ).parents( 'dd' ) );
356	}
357	
358	if ( $( 'input#mail_address_confirm' ).length ) {
359		$( '<span/>' )
360			.addClass( 'error_format' )
361			.appendTo( $( 'input#mail_address_confirm' ).parents( 'dd' ) );
362	}
363	
364	
365	$( 'input' ).on( 'keydown', function( e ) {
366		if ( ( e.which && e.which === 13 ) || ( e.keyCode && e.keyCode === 13 ) ) {
367			return false;

368		} else {
369			return true;
370		}
371	});
372	
373	
374	if ( $( 'textarea#mail_contents' ).length ) {
375		$( 'textarea#mail_contents' )
376			.focus(function() {
377				start_time = new Date();
378			})
379			.blur(function() {
380				stop_time = new Date();
381				writing_time += Math.round( ( stop_time - start_time ) / 1000 );
382			});
383	}
384	
385	
386	$( 'input#form_submit_button' ).click( required_check );
387	
388})( jQuery );
389