https://www.mces.co.jp/inquire/js/contact.js

1document.addEventListener('DOMContentLoaded',function(){
2  const mailForm = document.querySelector('#mailForm');
3  const errorClass = 'mailForm_err';
4  const entryScreen = document.querySelector('#entry');
5  const confirmScreen = document.querySelector('#confirm');
6  const corp = document.querySelector('#corpname');
7  const division = document.querySelector('#division');
8  const name = document.querySelector('#name');
9  const email1 = document.querySelector('#email1');
10  const email2 = document.querySelector('#email2');
11  const tel = document.querySelector('#tel');
12  const fax = document.querySelector('#fax');
13  const zip = document.querySelector('#zip');
14  const address = document.querySelector('#address');
15  const detail = document.querySelector('#detail');
16  const confirmBtn = document.querySelector('.js-confirm');
17  const backBtn = document.querySelector('.js-back');
18  const submitBtn = document.querySelector('.js-submit');
19  const emailPattern = /^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]{1,}\.[A-Za-z0-9]{1,}$/;
20  const telPattern = /^\(?\d{2,5}\)?[-(\.\s]{0,2}\d{1,4}[-)\.\s]{0,2}\d{3,4}$/;
21  
22  zip.addEventListener('blur',function() {
23    let api = 'https://zipcloud.ibsnet.co.jp/api/search?zipcode=';
24    let zipParam = zip.value.replace(/-/g,'');
25    let url = api + zipParam;
26    let mailAddress = document.querySelector('#address');
27
28    fetch(url).then(function(response){
29      return response.text();
30    }).then(function(text){
31      let text_json = JSON.parse(text);
32      let address = '';
33
34      if(zip.nextElementSibling){
35        zip.nextElementSibling.remove();
36      }
37
38      if(zipParam.length === 7 && text_json.results !== null){
39        for(let i = 0; i < text_json.results.length; i++){
40          for(let key in text_json.results[i]){
41            if(key.match(/address/)){
42              address += text_json.results[i][key];
43            }
44          }
45        }
46
47        if(text_json.status == 200){
48          mailAddress.value = address;
49        } else {
50          let errorText = '<p class="mailForm_err">住所が取得できませんでした。</p>';
51          mailAddress.insertAdjacentHTML('afterend',errorText);
52        }
53      } else {
54        let errorText = '<p class="mailForm_err">正しい郵便番号を入力してください。</p>';
55        zip.insertAdjacentHTML('afterend',errorText);
56      }
57    });
58  });
59
60  confirmBtn.addEventListener('click',function(){
61    const corpVal = corp.value;
62    const divisionVal = division.value;
63    const nameVal = name.value;
64    const email1Val = email1.value;
65    const email2Val = email2.value;
66    const telVal = tel.value;
67    const faxVal = fax.value;
68    const zipVal = zip.value;
69    const addressVal = address.value;
70    const detailVal = detail.value;
71    const corpResult = document.querySelector('#confirm_corp');
72    const divisionResult = document.querySelector('#confirm_division');
73    const nameResult = document.querySelector('#confirm_name');
74    const email1Result = document.querySelector('#confirm_email1');
75    const email2Result = document.querySelector('#confirm_email2');
76    const telResult = document.querySelector('#confirm_tel');
77    const faxResult = document.querySelector('#confirm_fax');
78    const zipResult = document.querySelector('#confirm_zip');
79    const addressResult = document.querySelector('#confirm_address');
80    const detailResult = document.querySelector('#confirm_detail');
81    const error = mailForm.querySelectorAll('.' + errorClass);
82    
83    const errorBlock = function(element,errorMessage){
84      const errorText = document.createElement('p');
85      const errorClass = 'mailForm_err';
86
87      errorText.classList.add(errorClass);
88      errorText.textContent = errorMessage;
89      element.parentNode.appendChild(errorText);
90    }
91    
92    const errorCheck = function(){
93      error.forEach(function(element){
94        element.remove();
95      });
96
97      if(nameVal == ''){
98        errorBlock(name,'お名前を入力してください');
99      }
100
101      if(email1Val !== ''){

102        if(!emailPattern.test(email1Val)){
103          errorBlock(email1,'メールアドレスの形式が違います');
104        }
105      } else {
106        errorBlock(email1,'メールアドレスを入力してください');
107      }
108
109      if(email2Val !==''){
110        if(email1Val !== email2Val){
111          errorBlock(email2,'メールアドレスが一致しておりません');
112        }
113      } else {
114        errorBlock(email2,'メールアドレスを入力してください');
115      }
116
117      if(telVal !== ''){
118        if(!telPattern.test(telVal)){
119          errorBlock(tel,'電話番号の形式が違います');
120        }
121      } else {
122        errorBlock(tel,'電話番号を入力してください');
123      }
124
125      if(faxVal !== ''){
126        if(!telPattern.test(faxVal)){
127          errorBlock(fax,'FAX番号の形式が違います');
128        }
129      }
130
131      if(detailVal == ''){
132        errorBlock(detail,'お問い合わせ内容を入力してください');
133      }
134
135
136
137
138      const errorElement = mailForm.querySelector('.' + errorClass);
139
140      if(errorElement){
141        const errorRect = errorElement.getBoundingClientRect().top;
142        const errorOffsetHeight = errorElement.parentNode.offsetHeight;
143        const headerOffsetHeight = document.querySelector('#header').offsetHeight;
144        const currentPositon = window.scrollY;
145
146        window.scrollTo({
147          top: currentPositon + errorRect - errorOffsetHeight - headerOffsetHeight,
148          behavior: 'smooth'
149        });
150      }
151    }
152    
153    const escapeHtml = function(str){
154      return str.replace(/&/g, '<')
155      .replace(/</g, '&lt;')
156      .replace(/>/g, '&gt;')
157      .replace(/"/g, '&quot;')
158      .replace(/'/g, "&#x27;");
159    }
160
161    const confirmEntry = function(){
162      entryScreen.setAttribute('aria-hidden', 'true');
163      confirmScreen.setAttribute('aria-hidden', 'false');
164      corpResult.textContent = escapeHtml(corpVal);
165      divisionResult.textContent = escapeHtml(divisionVal);
166      nameResult.textContent = escapeHtml(nameVal);
167      email1Result.textContent = email1Val;
168      email2Result.textContent = email2Val;
169      telResult.textContent = telVal;
170      faxResult.textContent = faxVal;
171      zipResult.textContent = zipVal;
172      addressResult.textContent = escapeHtml(addressVal);
173      detailResult.textContent = escapeHtml(detailVal);
174
175      const confirmScreenOffsetTop = confirmScreen.offsetTop;
176
177      window.scrollTo({
178        top: confirmScreenOffsetTop,
179        behavior: 'smooth'
180      });
181    }
182    
183    errorCheck();
184    let errorAll = mailForm.querySelectorAll('.' + errorClass);
185
186    if(errorAll.length == 0){
187      confirmEntry();
188    } else {
189      const errorElement = mailForm.querySelector('.' + errorClass);
190
191      if(errorElement){
192        const errorRect = errorElement.getBoundingClientRect().top;
193        const errorOffsetHeight = errorElement.parentNode.offsetHeight;
194        const headerOffsetHeight = document.querySelector('#header').offsetHeight;
195        const currentPositon = window.scrollY;
196
197        window.scrollTo({
198          top: currentPositon + errorRect - errorOffsetHeight - headerOffsetHeight,
199          behavior: 'smooth'
200        });
201      }
202    }
203  });
204  
205  backBtn.addEventListener('click',function(){
206    entryScreen.setAttribute('aria-hidden', 'false');
207    confirmScreen.setAttribute('aria-hidden', 'true');
208    const entryScreenOffsetTop = entryScreen.offsetTop;
209    window.scrollTo({
210      top: entryScreenOffsetTop,
211      behavior: 'smooth'
212    });
213  })
214
215  submitBtn.addEventListener('click',function(){
216    mailForm.submit();
217  })
218});