/* ========================================== Custom JS for Contact page ========================================== */ const myform = document.querySelector('#formGeneratorForm') const fieldLastName = myform.querySelector('#last_name'), fieldFirstName = myform.querySelector('#first_name'), fieldEmail = myform.querySelector('#email'), fieldContactCategory = myform.querySelector('#contact_category'), fieldOrderNumber = myform.querySelector('#order_number'), fieldProductNumber = myform.querySelector('#product_number'), fieldFile = myform.querySelector('#file'), fieldContactDetails = myform.querySelector('#details'), submitBtn = myform.querySelector('button[type="submit"]') // 初期表示 const confirmBtn = ` ` submitBtn.insertAdjacentHTML('beforebegin', confirmBtn) // 商品詳細から遷移した場合、商品品番項目を埋める const getParam = (name, url) => { if (!url) url = window.location.href name = name.replace(/[\[\]]/g, '\\{2}amp;') var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'), results = regex.exec(url) if (!results) return null if (!results[2]) return '' return decodeURIComponent(results[2].replace(/\+/g, ' ')) } if (getParam('product')) { fieldProductNumber.value = getParam('product') fieldContactCategory.value = '商品について' } if (getParam('order')) { fieldOrderNumber.value = getParam('order') fieldContactCategory.value = 'ご注文について' } // ラベルのtabindexを-1に const labels = myform.querySelectorAll('.block_label') console.log({ labels }) if (labels) { labels.forEach((label) => { label.tabIndex = -1 }) } const infoMessages = myform.querySelectorAll('.infoMessage') if (infoMessages) { infoMessages.forEach((info) => { info.tabIndex = -1 }) } // ファイル入力の形式を改造 const fileInputWrapper = myform.querySelector('.form-group.image') if (fileInputWrapper) { const fakeLabel = `

画像・ファイルの添付

` fileInputWrapper.insertAdjacentHTML('afterbegin', fakeLabel) } const fileInputLabel = myform.querySelector('label[for^="imageupload"]') if (fileInputLabel) { const fileLabelInner = `

ファイルを選択してください
対象のフォーマット: JPG, JPEG, PNG, GIF, SVG.

選択する

` fileInputLabel.textContent = '' fileInputLabel.insertAdjacentHTML('beforeend', fileLabelInner) } // 必須ラベルを付与 requiredItems = document.querySelectorAll('.form-control.required') requiredItems.forEach((item) => { if (item.id !== 'first_name' && item.id !== 'name_kana_mei') { item.parentNode.querySelector('label').classList.add('is-required') item.parentNode.querySelector('label').textContent = item.parentNode .querySelector('label') .textContent.replace('*', '') } }) // お名前、フリガナのラベル書き換え fieldLastName.parentNode.querySelector('label').textContent = 'お名前' fieldLastName.parentNode.querySelector('label').classList.add('is-nowrap') fieldFirstName.parentNode.querySelector('label').textContent = '' // お問い合わせ内容のmaxlength属性を削除(バリデーションで制御) fieldContactDetails.removeAttribute('maxlength') // 確認に進むボタン押下時処理 document.querySelector('#stepConfirmBtn').addEventListener('click', (event) => { event.preventDefault() const formInputItems = myform.querySelectorAll( '.form_container input,.form_container select,.form_container textarea' ) // Topへスクロール var bodyElem = document.querySelector('body') bodyElem.scrollIntoView({ behavior: 'smooth', }) // バリデーション let errorFlg = false //バリデーションメソッド定義 const checkBlank = (_value) => { if (_value.length === 0) { return false } else { return true } } const checkLength = (_value, _max_length) => { if (_value.length > _max_length) { return false } else { return true } } const checkFullWidthChara = (_value) => { const zenkakuRegex = /[\x01-\x7E\uFF65-\uFF9F]/ if (zenkakuRegex.test(_value) === true) { return false } else { return true } } const checkHalfWidthChara = (_value) => { const hankakuRegex = /^[\x20-\x7E]*$/ if (hankakuRegex.test(_value) !== true) { return false } else { return true } } const checkKanaChara = (_value) => { // カナ文字かどうか const kanaRegex = /^[\u30A0-\u30FFー\s]+$/ if (kanaRegex.test(_value) !== true) { return false } else { return true } } const checkPhoneNumber = (_value) => { // 0から始まり、ハイフンあり→「1~3桁数値-2~4桁数値-3~4桁数値」ハイフンなし→「9〜11桁の数値」であればOK const phoneRegex = /^0\d{8,10}$|^0\d{1,3}-\d{2,4}-\d{3,4}$/ if (phoneRegex.test(_value) === false) { return false } else { return true } } const checkZipNumber = (_value) => { const zipRegex = /\d{3}-?\d{4}$/ if (zipRegex.test(_value) === false) { return false } else { return true } } document.querySelectorAll('.c-error-txt').forEach((elem) => elem.remove()) document.querySelectorAll('.is-error').forEach((elem) => elem.classList.remove('is-error')) formInputItems.forEach((elem, index) => { let errorMsg = '' // 姓 if (elem.id === 'last_name') { if (checkBlank(elem.value) !== true) { errorFlg = true errorMsg = '必須項目です。' elem.insertAdjacentHTML('afterend', `${errorMsg}`) elem.classList.add('is-error') } else if (checkLength(elem.value, 20) !== true) { errorFlg = true errorMsg = '20文字以内で入力してください。' elem.insertAdjacentHTML('afterend', `${errorMsg}`) elem.classList.add('is-error') } } // 名 if (elem.id === 'first_name') { if (checkBlank(elem.value) !== true) { errorFlg = true errorMsg = '必須項目です。' elem.insertAdjacentHTML('afterend', `${errorMsg}`) elem.classList.add('is-error') } else if (checkLength(elem.value, 20) !== true) { errorFlg = true errorMsg = '20文字以内で入力してください。' elem.insertAdjacentHTML('afterend', `${errorMsg}`) elem.classList.add('is-error') } } // セイ if (elem.id === 'name_kana_sei') { if (checkBlank(elem.value) !== true) { errorFlg = true errorMsg = '必須項目です。' elem.insertAdjacentHTML('afterend', `${errorMsg}`) elem.classList.add('is-error') } else if (checkKanaChara(elem.value) !== true) { errorFlg = true errorMsg = 'カタカナで入力してください。' elem.insertAdjacentHTML('afterend', `${errorMsg}`) elem.classList.add('is-error') } } // メイ if (elem.id === 'name_kana_mei') { if (checkBlank(elem.value) !== true) { errorFlg = true errorMsg = '必須項目です。' elem.insertAdjacentHTML('afterend', `${errorMsg}`) elem.classList.add('is-error') } else if (checkKanaChara(elem.value) !== true) { errorFlg = true errorMsg = 'カタカナで入力してください。' elem.insertAdjacentHTML('afterend', `${errorMsg}`) elem.classList.add('is-error') } } // 電話番号 if (elem.id === 'phone') { if (checkBlank(elem.value) !== true) { errorFlg = true errorMsg = '必須項目です。' elem.insertAdjacentHTML('afterend', `${errorMsg}`) elem.classList.add('is-error') } else if (checkPhoneNumber(elem.value) !== true) { if (checkHalfWidthChara(elem.value) !== true) { errorFlg = true errorMsg = '半角で入力してください' elem.insertAdjacentHTML('beforebegin', `${errorMsg}`) elem.classList.add('is-error') } errorFlg = true errorMsg = '正しい電話番号を入力してください' elem.insertAdjacentHTML('beforebegin', `${errorMsg}`) elem.classList.add('is-error') } } // メールアドレス if (elem.id === 'email') { if (checkBlank(elem.value) !== true) { errorFlg = true errorMsg = '必須項目です。' elem.insertAdjacentHTML('afterend', `${errorMsg}`) elem.classList.add('is-error') } } // お問い合わせ種別 if (elem.id === 'contact_category') { if (checkBlank(elem.value) !== true) { errorFlg = true errorMsg = '必須項目です。' elem.insertAdjacentHTML('afterend', `${errorMsg}`) elem.classList.add('is-error') } } // 商品品番(お問い合わせ種別="商品について"の場合) if (document.querySelector('#contact_category').value === '商品について' && elem.id === 'product_number') { if (checkBlank(elem.value) !== true) { errorFlg = true errorMsg = '必須項目です。' elem.insertAdjacentHTML('afterend', `${errorMsg}`) elem.classList.add('is-error') } } // お問い合わせ内容 if (elem.id === 'details') { if (checkBlank(elem.value) !== true) { errorFlg = true errorMsg = '必須項目です。' elem.insertAdjacentHTML('afterend', `${errorMsg}`) elem.classList.add('is-error') } else if (checkLength(elem.value, 1000) !== true) { errorFlg = true errorMsg = '1000文字以内で入力してください。' elem.insertAdjacentHTML('afterend', `${errorMsg}`) elem.classList.add('is-error') } } }) if (errorFlg === false) { // エラーなしの場合、確認画面を表示 let confirmation_content = `

下記の内容で送信してもよろしいでしょうか？よろしければ、一番下の「送信する」ボタンをクリックしてください。

` formInputItems.forEach((inputItem, index) => { // お名前名、お名前メイは処理スキップ if (inputItem.id !== 'first_name' && inputItem.id !== 'name_kana_mei' && !inputItem.id.includes('imageupload')) { let inputItemLabel = '', inputItemValue = '' // お名前、お名前（フリガナ）のみ名寄せ if (inputItem.id === 'last_name') { inputItemLabel = 'お名前' inputItemValue = fieldLastName.value + ' ' + fieldFirstName.value } else { ;(inputItemLabel = inputItem.parentNode.querySelector('label').textContent), (inputItemValue = inputItem.value) } confirmation_content += `

${inputItemLabel}

${inputItemValue}

` } else if (inputItem.id.includes('imageupload') && inputItem.value) { confirmation_content += `

画像・ファイルの添付

${inputItem.files[0].name}

` } }) confirmation_content += `

` confirmation_content += `

` myform.insertAdjacentHTML('beforebegin', confirmation_content) // 送信ボタン document.querySelector('#submitAppBtn').addEventListener('click', (event) => { event.preventDefault() submitBtn.click() // アプリのフォームを監視 // →もし何かエラーがあれば、元のフォームを表示 const intervalId = setInterval(() => { if (document.querySelector('.alert_message')) { //ドキュメントが読み込まれば場合の処理 clearInterval(intervalId) document.querySelector('.c-confirmation').remove() } }, 1000) }) // 前の画面へ戻るボタン document.querySelector('#backPreviousBtn').addEventListener('click', (event) => { event.preventDefault() document.querySelector('.c-confirmation').remove() }) } })