/*-------------------------------------------------------------------------- Script Name : Responsive Mailform Author : FIRSTSTEP - Motohiro Tani Author URL : https://www.1-firststep.com Create Date : 2014/03/25 Version : 7.2.1 Last Update : 2019/10/03 --------------------------------------------------------------------------*/ (function( $ ) { // global variable init var mailform_dt = $( 'form#mail_form dl dt' ); var confirm_window = 1; // function resize function resize() { $( '.loading-layer' ).css({ 'width' : $( window ).width() + 'px', 'height' : window.innerHeight + 'px' }); } // function slice_method function slice_method( el ) { var dt = el.parents( 'dd' ).prev( 'dt' ); var dt_name = dt.html().replace( /.*<\/span>/gi, '' ); dt_name = dt_name.replace( /^/gi, '' ); dt_name = dt_name.replace( /
|
/gi, '' ); return dt_name; } // function error_span function error_span( e, dt, comment, bool ) { if ( bool === true ) { var m = e.parents( 'dd' ).find( 'span.error_blank' ).text( dt + 'が' + comment + 'されていません' ); } else { var m = e.parents( 'dd' ).find( 'span.error_blank' ).text( '' ); } } // function compare_method function compare_method( s, e ) { if ( s > e ) { return e; } else { return s; } } // function hidden_append function hidden_append( name, value ) { $( '' ) .attr({ type: 'hidden', id: name, name: name, value: value }) .appendTo( $( 'p#form_submit' ) ); } // function file_change function file_change( e ) { var element = $( this ).parents( 'li' ).find( 'p.change_image' ); var files = e.target.files; if ( $( this ).attr( 'multiple' ) !== undefined ) { element.find( 'img' ).remove(); for ( var i = 0; i < files.length; i++ ) { if ( files[i].type.indexOf( 'image' ) === -1 ) { continue; } var reader = new FileReader(); reader.readAsDataURL( files[i] ); reader.onload = (function( file ) { return function( e ) { $( '' ) .attr( 'src', e.target.result ) .css( 'display', 'none' ) .on( 'load', function() { $( this ) .appendTo( element ) .fadeIn( 'fast' ); }); } })( files[i] ); } } else { if ( files[0].type.indexOf( 'image' ) === -1 ) { element.find( 'img' ).remove(); } else { var reader = new FileReader(); reader.readAsDataURL( files[0] ); reader.onload = (function( file ) { return function( e ) { $( '' ) .attr( 'src', e.target.result ) .css( 'display', 'none' ) .on( 'load', function() { element.find( 'img' ).remove(); $( this ) .appendTo( element ) .fadeIn( 'fast' ); }); } })( files[0] ); } } } // function required_check function required_check() { var error = 0; var scroll_point = $( 'body' ).height(); for ( var i = 0; i < mailform_dt.length; i++ ) { // required input if ( mailform_dt.eq(i).next( 'dd' ).find( 'input' ).length && mailform_dt.eq(i).next( 'dd' ).hasClass( 'required' ) ) { var elements = mailform_dt.eq(i).next( 'dd' ).find( 'input' ); var dt_name = slice_method( elements.eq(0) ); if ( elements.eq(0).attr( 'type' ) === 'radio' || elements.eq(0).attr( 'type' ) === 'checkbox' ) { var list_error = 0; for ( var j = 0; j < elements.length; j++ ) { if ( elements.eq(j).prop( 'checked' ) === false ) { list_error++; } } if ( list_error === elements.length ) { error_span( elements.eq(0), dt_name, '選択', true ); error++; scroll_point = compare_method( scroll_point, elements.eq(0).offset().top ); } else { error_span( elements.eq(0), dt_name, '', false ); } } else if ( elements.eq(0).attr( 'type' ) === 'hidden' && elements.eq(0).attr( 'name' ) === 'MAX_FILE_SIZE' ) { if ( elements.eq(1).attr( 'multiple' ) != undefined ) { if ( elements.eq(1)[0].files[0] == null ) { error_span( elements.eq(1), dt_name, '選択', true ); error++; scroll_point = compare_method( scroll_point, elements.eq(1).offset().top ); } else { error_span( elements.eq(1), dt_name, '', false ); } } else { var list_error = 0; for ( var j = 1; j < elements.length; j++ ) { if ( elements.eq(j)[0].files[0] == null ) { list_error++; } } if ( list_error === elements.length - 1 ) { error_span( elements.eq(1), dt_name, '選択', true ); error++; scroll_point = compare_method( scroll_point, elements.eq(1).offset().top ); } else { error_span( elements.eq(1), dt_name, '', false ); } } } else { var list_error = 0; for ( var j = 0; j < elements.length; j++ ) { if ( elements.eq(j).val() === '' ) { list_error++; } } if ( list_error !== 0 ) { error_span( elements.eq(0), dt_name, '入力', true ); error++; scroll_point = compare_method( scroll_point, elements.eq(0).offset().top ); } else { error_span( elements.eq(0), dt_name, '', false ); } } } // required select if ( mailform_dt.eq(i).next( 'dd' ).find( 'select' ).length && mailform_dt.eq(i).next( 'dd' ).hasClass( 'required' ) ) { var elements = mailform_dt.eq(i).next( 'dd' ).find( 'select' ); var dt_name = slice_method( elements.eq(0) ); var list_error = 0; for ( var j = 0; j < elements.length; j++ ) { if ( elements.eq(j).val() === '' ) { list_error++; } } if ( list_error !== 0 ) { error_span( elements.eq(0), dt_name, '選択', true ); error++; scroll_point = compare_method( scroll_point, elements.eq(0).offset().top ); } else { error_span( elements.eq(0), dt_name, '', false ); } } // required textarea if ( mailform_dt.eq(i).next( 'dd' ).find( 'textarea' ).length && mailform_dt.eq(i).next( 'dd' ).hasClass( 'required' ) ) { var elements = mailform_dt.eq(i).next( 'dd' ).find( 'textarea' ); var dt_name = slice_method( elements.eq(0) ); if ( elements.eq(0).val() === '' ) { error_span( elements.eq(0), dt_name, '入力', true ); error++; scroll_point = compare_method( scroll_point, elements.eq(0).offset().top ); } else { error_span( elements.eq(0), dt_name, '', false ); } } // no-required email if ( mailform_dt.eq(i).next( 'dd' ).find( 'input' ).length && mailform_dt.eq(i).next( 'dd' ).find( 'input' ).eq(0).attr( 'type' ) === 'email' ) { var elements = mailform_dt.eq(i).next( 'dd' ).find( 'input' ); var dt_name = slice_method( elements.eq(0) ); if( elements.eq(0).val() !== '' && ! ( elements.eq(0).val().match(/^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$/) ) ) { elements.eq(0).parents( 'dd' ).find( 'span.error_format' ).text( '正しいメールアドレスの書式ではありません。' ); error++; scroll_point = compare_method( scroll_point, elements.eq(0).offset().top ); } else { elements.eq(0).parents( 'dd' ).find( 'span.error_format' ).text( '' ); } } if ( mailform_dt.eq(i).next( 'dd' ).find( 'input' ).length && mailform_dt.eq(i).next( 'dd' ).find( 'input' ).eq(0).attr( 'type' ) === 'hidden' && mailform_dt.eq(i).next( 'dd' ).find( 'input' ).eq(0).attr( 'name' ) === 'MAX_FILE_SIZE' ) { var max_file_size = mailform_dt.eq(i).next( 'dd' ).find( 'input' ).eq(0).attr( 'value' ); var ext_error = 0; var size_error = true; if ( mailform_dt.eq(i).next( 'dd' ).find( 'input' ).eq(1).attr( 'multiple' ) != undefined ) { if ( mailform_dt.eq(i).next( 'dd' ).find( 'input' ).eq(1)[0].files[0] != null ) { var element = mailform_dt.eq(i).next( 'dd' ).find( 'input' ).eq(1); var attachment_accept = element.attr( 'accept' ); attachment_accept = attachment_accept.replace( /\s/g, '' ); attachment_accept = attachment_accept.split( ',' ); for ( var j = 0; j < element[0].files.length; j++ ) { for ( var k = 0; k < attachment_accept.length; k++ ) { if ( element[0].files[j].type != attachment_accept[k] ) { ext_error++; } } if ( element[0].files[j].size > max_file_size ) { size_error = false; } } if ( ext_error > element[0].files.length * ( attachment_accept.length - 1 ) ) { if ( element[0].files.length > 1 ) { element.parents( 'dd' ).find( 'span.error_filetype' ).text( '未対応の形式のファイルが含まれています。' ); } else { element.parents( 'dd' ).find( 'span.error_filetype' ).text( '未対応の形式のファイルです。' ); } error++; scroll_point = compare_method( scroll_point, element.offset().top ); } else if ( size_error === false ) { if ( element[0].files.length > 1 ) { element.parents( 'dd' ).find( 'span.error_filetype' ).text( 'ファイルのサイズが大き過ぎるものが含まれています。' ); } else { element.parents( 'dd' ).find( 'span.error_filetype' ).text( 'ファイルのサイズが大き過ぎます。' ); } error++; scroll_point = compare_method( scroll_point, element.offset().top ); } else { element.parents( 'dd' ).find( 'span.error_filetype' ).text( '' ); } } } else { var elements = mailform_dt.eq(i).next( 'dd' ).find( 'input' ); var file_count = 0; var accept_count = 0; for ( var j = 1; j < elements.length; j++ ) { if ( elements.eq(j)[0].files[0] != null ) { file_count++; if ( elements.eq(j)[0].files[0].size > max_file_size ) { size_error = false; } var attachment_accept = elements.eq(j).attr( 'accept' ); attachment_accept = attachment_accept.replace( /\s/g, '' ); attachment_accept = attachment_accept.split( ',' ); for ( var k = 0; k < attachment_accept.length; k++ ) { accept_count++; if ( elements.eq(j)[0].files[0].type != attachment_accept[k] ) { ext_error++; } } } } if ( ext_error > accept_count - file_count ) { if ( file_count > 1 ) { elements.eq(1).parents( 'dd' ).find( 'span.error_filetype' ).text( '未対応の形式のファイルが含まれています。' ); } else { elements.eq(1).parents( 'dd' ).find( 'span.error_filetype' ).text( '未対応の形式のファイルです。' ); } error++; scroll_point = compare_method( scroll_point, elements.eq(1).offset().top ); } else if ( size_error === false ) { if ( file_count > 1 ) { elements.eq(1).parents( 'dd' ).find( 'span.error_filetype' ).text( 'ファイルのサイズが大き過ぎるものが含まれています。' ); } else { elements.eq(1).parents( 'dd' ).find( 'span.error_filetype' ).text( 'ファイルのサイズが大き過ぎます。' ); } error++; scroll_point = compare_method( scroll_point, elements.eq(1).offset().top ); } else { elements.eq(1).parents( 'dd' ).find( 'span.error_filetype' ).text( '' ); } } } } if ( $( 'input#mail_address_confirm' ).length && $( 'input#mail_address' ).length ) { var element = $( 'input#mail_address_confirm' ); var element_2 = $( 'input#mail_address' ); var dt_name = slice_method( element ); if ( element.val() !== '' && element.val() !== element_2.val() ) { element.parents( 'dd' ).find( 'span.error_match' ).text( 'メールアドレスが一致しません。' ); error++; scroll_point = compare_method( scroll_point, element.offset().top ); } else { element.parents( 'dd' ).find( 'span.error_match' ).text( '' ); } } if ( error === 0 ) { if ( confirm_window === 1 ) { if ( window.confirm( '送信してもよろしいですか?' ) ) { send_setup(); order_set(); send_method(); } } } else { $( 'html, body' ).animate({ scrollTop: scroll_point - 70 }, 500 ); } } // function send_setup function send_setup() { hidden_append( 'javascript_action', true ); var now_url = encodeURI( document.URL ); hidden_append( 'now_url', now_url ); var before_url = encodeURI( document.referrer ); hidden_append( 'before_url', before_url ); } // function order_set function order_set() { var order_number = 0; for ( var i = 0; i < mailform_dt.length; i++ ) { if ( mailform_dt.eq(i).next( 'dd' ).find( 'input' ).length ) { var elements = mailform_dt.eq(i).next( 'dd' ).find( 'input' ); var dt_name = slice_method( elements.eq(0) ); if ( elements.eq(0).attr( 'type' ) === 'radio' || elements.eq(0).attr( 'type' ) === 'checkbox' ) { var attr_name = elements.eq(0).attr( 'name' ).replace( /\[|\]/g, '' ); var attr_type = elements.eq(0).attr( 'type' ); order_number++; hidden_append( 'order_' + order_number, attr_type + ',' + attr_name + ',false,' + dt_name ); } else if ( elements.eq(0).attr( 'type' ) === 'hidden' && elements.eq(0).attr( 'name' ) === 'MAX_FILE_SIZE' ) { var attr_name = elements.eq(1).attr( 'name' ).replace( /\[|\]/g, '' ); if ( navigator.userAgent.indexOf( 'Safari' ) != -1 ) { // for iOS 11.3 Safari Bugfix if ( elements.eq(1).attr( 'multiple' ) != undefined ) { if ( elements.eq(1)[0].files[0] == null ) { elements.eq(1).prop( 'disabled', true ); var attr_type = 'text'; } else { var attr_type = elements.eq(1).attr( 'type' ); } } else { var list_error = 0; for ( var j = 1; j < elements.length; j++ ) { if ( elements.eq(j)[0].files[0] == null ) { elements.eq(j).prop( 'disabled', true ); list_error++; } } if ( list_error === elements.length - 1 ) { var attr_type = 'text'; } else { var attr_type = elements.eq(1).attr( 'type' ); } } } else { var attr_type = elements.eq(1).attr( 'type' ); } order_number++; hidden_append( 'order_' + order_number, attr_type + ',' + attr_name + ',false,' + dt_name ); } else { for ( var j = 0; j < elements.length; j++ ) { var attr_name = elements.eq(j).attr( 'name' ); var attr_type = elements.eq(j).attr( 'type' ); if ( j === 0 ) { var connect = 'false'; } else { var connect = 'true'; } order_number++; hidden_append( 'order_' + order_number, attr_type + ',' + attr_name + ',' + connect + ',' + dt_name ); } } } if ( mailform_dt.eq(i).next( 'dd' ).find( 'select' ).length ) { var elements = mailform_dt.eq(i).next( 'dd' ).find( 'select' ); var dt_name = slice_method( elements.eq(0) ); for ( var j = 0; j < elements.length; j++ ) { var attr_name = elements.eq(j).attr( 'name' ); var attr_type = 'select'; if ( j === 0 ) { var connect = 'false'; } else { var connect = 'true'; } order_number++; hidden_append( 'order_' + order_number, attr_type + ',' + attr_name + ',' + connect + ',' + dt_name ); } } if ( mailform_dt.eq(i).next( 'dd' ).find( 'textarea' ).length ) { var elements = mailform_dt.eq(i).next( 'dd' ).find( 'textarea' ); var dt_name = slice_method( elements.eq(0) ); var attr_name = elements.eq(0).attr( 'name' ); var attr_type = 'textarea'; order_number++; hidden_append( 'order_' + order_number, attr_type + ',' + attr_name + ',false,' + dt_name ); } } hidden_append( 'order_count', order_number ); } // function send_method function send_method() { $( '
' ) .addClass( 'loading-layer' ) .appendTo( 'body' ) .css({ 'width': $( window ).width() + 'px', 'height': $( window ).height() + 'px', 'background': 'rgba( 0, 0, 0, 0.7 )', 'position': 'fixed', 'left': '0', 'top': '0', 'z-index': '999' }) .append( '' ); setTimeout(function(){ var form_data = new FormData( $( 'form#mail_form' ).get(0) ); $.ajax({ type: $( 'form#mail_form' ).attr( 'method' ), url: $( 'form#mail_form' ).attr( 'action' ), cache: false, dataType: 'html', data: form_data, contentType: false, processData: false, success: function( res ) { $( 'div.loading-layer, span.loading' ).remove(); var response = res.split( ',' ); if ( response[0] === 'send_success' ) { window.location.href = response[1]; } else { $( 'input#form_submit_button' ).nextAll( 'input' ).remove(); response[1] = response[1].replace( /
|
/gi, "\n" ); window.alert( response[1] ); ios_bugfix(); } }, error: function( res ) { $( 'div.loading-layer, span.loading' ).remove(); $( 'input#form_submit_button' ).nextAll( 'input' ).remove(); window.alert( '通信に失敗しました。\nページの再読み込みをしてからもう一度お試しください。' ); } }); }, 1000 ); } // function ios_bugfix function ios_bugfix() { var elements = $( 'input[type="file"]' ); if ( elements.length > 0 ) { for ( var i = 0; i < elements.length; i++ ) { elements.eq(i).prop( 'disabled', false ); } } } // page setting for ( var i = 0; i < mailform_dt.length; i++ ) { if ( mailform_dt.eq(i).next( 'dd' ).hasClass( 'required' ) ) { $( '' ) .text( '必須' ) .addClass( 'required' ) .prependTo( $( mailform_dt.eq(i) ) ); } else { $( '' ) .text( '任意' ) .addClass( 'optional' ) .prependTo( $( mailform_dt.eq(i) ) ); } $( '' ) .addClass( 'error_blank' ) .appendTo( mailform_dt.eq(i).next( 'dd' ) ); if ( mailform_dt.eq(i).next( 'dd' ).find( 'input' ).length && mailform_dt.eq(i).next( 'dd' ).find( 'input' ).eq(0).attr( 'type' ) === 'email' ) { $( '' ) .addClass( 'error_format' ) .appendTo( mailform_dt.eq(i).next( 'dd' ) ); } if ( mailform_dt.eq(i).next( 'dd' ).find( 'input' ).length && mailform_dt.eq(i).next( 'dd' ).find( 'input' ).eq(0).attr( 'type' ) === 'hidden' && mailform_dt.eq(i).next( 'dd' ).find( 'input' ).eq(1).attr( 'type' ) === 'file' ) { $( '' ) .addClass( 'error_filetype' ) .appendTo( mailform_dt.eq(i).next( 'dd' ) ); $( '

' ) .addClass( 'accept_filetype' ) .text( '対応ファイル形式 : .jpg .png .gif' ) .insertBefore( mailform_dt.eq(i).next( 'dd' ).find( 'span.error_blank' ) ); var elements = mailform_dt.eq(i).next( 'dd' ).find( 'input' ); elements.eq(0).attr( 'value', '2000000' ); for ( var j = 1; j < elements.length; j++ ) { elements.eq(j).attr( 'accept', 'image/jpeg,image/png,image/gif' ); $( '

' ) .attr( 'class', 'change_image' ) .insertBefore( elements.eq(j) ); } } } if ( $( 'input#mail_address_confirm' ).length ) { $( '' ) .addClass( 'error_match' ) .appendTo( $( 'input#mail_address_confirm' ).parents( 'dd' ) ); } $( 'input' ).on( 'keydown', function( e ) { if ( ( e.which && e.which === 13 ) || ( e.keyCode && e.keyCode === 13 ) ) { return false; } else { return true; } }); $( 'form#mail_form' ).attr( 'enctype', 'multipart/form-data' ); $( 'input[type="file"]' ).val( '' ); $( window ).on( 'resize', resize ); $( 'input#form_submit_button' ).on( 'click', required_check ); $( 'input[type="file"]' ).on( 'change', file_change ); })( jQuery );