https://keihan-cc.co.jp/wp-content/plugins/daily-inquiry-forms-v1.0.2/assets/frontend.js

1(function () {
2    'use strict';
3
4    function getFieldByKey(form, key) {
5        if (!key) return null;
6        return form.querySelector('[name="dsif_data[' + key + ']"]');
7    }
8
9    function clearMatchError(input) {
10        var field = input.closest('.dsif-field');
11        if (!field || !field.classList.contains('dsif-field--client-error')) return;
12
13        field.classList.remove('dsif-field--error', 'dsif-field--client-error');
14        input.setAttribute('aria-invalid', 'false');
15
16        var error = field.querySelector('.dsif-field-error--client');
17        if (error) error.remove();
18    }
19
20    function showMatchError(input) {
21        var field = input.closest('.dsif-field');
22        var fieldset = input.closest('.dsif-fieldset');
23        if (!field || !fieldset) return;
24
25        field.classList.add('dsif-field--error', 'dsif-field--client-error');
26        input.setAttribute('aria-invalid', 'true');
27
28        if (!field.querySelector('.dsif-field-error--client')) {
29            var error = document.createElement('p');
30            error.className = 'dsif-field-error dsif-field-error--client';
31            error.setAttribute('role', 'alert');
32            error.textContent = input.getAttribute('data-dsif-match-message') || 'メールアドレスが一致しません。';
33            fieldset.appendChild(error);
34        }
35    }
36
37    function showFormError(form, message) {
38        var existing = form.querySelector('.dsif-client-system-error');
39        if (!existing) {
40            existing = document.createElement('div');
41            existing.className = 'dsif-notice dsif-notice--error dsif-client-system-error';
42            existing.setAttribute('role', 'alert');
43            var submitWrap = form.querySelector('.dsif-submit-wrap');
44            if (submitWrap) {
45                submitWrap.parentNode.insertBefore(existing, submitWrap);
46            } else {
47                form.appendChild(existing);
48            }
49        }
50        existing.textContent = message;
51        existing.scrollIntoView({ behavior: 'smooth', block: 'center' });
52    }
53
54    function setSubmitting(form, submitting) {
55        var button = form.querySelector('.dsif-submit-button');
56        if (!button) return;
57        if (submitting) {
58            if (!button.dataset.dsifOriginalText) {
59                button.dataset.dsifOriginalText = button.textContent;
60            }
61            button.disabled = true;
62            button.setAttribute('aria-busy', 'true');
63            button.textContent = '送信中…';
64        } else {
65            button.disabled = false;
66            button.removeAttribute('aria-busy');
67            if (button.dataset.dsifOriginalText) {
68                button.textContent = button.dataset.dsifOriginalText;
69            }
70        }
71    }
72
73    function renderRecaptchaWidgets() {
74        if (!window.grecaptcha || typeof window.grecaptcha.render !== 'function') return;
75
76        document.querySelectorAll('.dsif-recaptcha-widget:not([data-dsif-rendered])').forEach(function (element) {
77            var form = element.closest('.dsif-form');
78            if (!form) return;
79
80            var type = element.getAttribute('data-dsif-recaptcha');
81            var siteKey = element.getAttribute('data-sitekey');
82            if (!siteKey) return;
83
84            try {
85                if (type === 'v2') {
86                    var v2WidgetId = window.grecaptcha.render(element, {
87                        sitekey: siteKey,
88                        theme: element.getAttribute('data-theme') || 'light',
89                        isolated: true
90                    });
91                    form.dataset.dsifRecaptchaWidget = String(v2WidgetId);
92                } else if (type === 'v3') {
93                    var v3WidgetId = window.grecaptcha.render(element, {
94                        sitekey: siteKey,
95                        size: 'invisible',
96                        badge: 'bottomright',
97                        callback: function (token) {
98                            var tokenInput = form.querySelector('.dsif-recaptcha-token');
99                            if (!tokenInput || !token) {
100                                setSubmitting(form, false);
101                                showFormError(form, 'reCAPTCHAの確認に失敗しました。もう一度お試しください。');
102                                return;
103                            }
104                            tokenInput.value = token;
105                            form.dataset.dsifRecaptchaComplete = '1';
106                            HTMLFormElement.prototype.submit.call(form);
107                        },
108                        'error-callback': function () {
109                            setSubmitting(form, false);
110                            showFormError(form, 'reCAPTCHAに接続できませんでした。通信状況をご確認のうえ、もう一度お試しください。');
111                        },
112                        'expired-callback': function () {
113                            form.dataset.dsifRecaptchaComplete = '';
114                            var tokenInput = form.querySelector('.dsif-rec

114aptcha-token');
115                            if (tokenInput) tokenInput.value = '';
116                        }
117                    });
118                    form.dataset.dsifRecaptchaWidget = String(v3WidgetId);
119                }
120                element.setAttribute('data-dsif-rendered', '1');
121            } catch (error) {
122                showFormError(form, 'reCAPTCHAを読み込めませんでした。ページを再読み込みしてください。');
123            }
124        });
125    }
126
127    window.dsifRecaptchaLoaded = function () {
128        renderRecaptchaWidgets();
129    };
130
131    document.addEventListener('input', function (event) {
132        var input = event.target.closest('[data-dsif-match-key]');
133        if (!input) return;
134
135        var form = input.closest('.dsif-form');
136        var source = form ? getFieldByKey(form, input.getAttribute('data-dsif-match-key')) : null;
137        if (source && input.value.trim().toLowerCase() === source.value.trim().toLowerCase()) {
138            clearMatchError(input);
139        }
140    });
141
142    document.addEventListener('submit', function (event) {
143        var form = event.target.closest('.dsif-form');
144        if (!form) return;
145
146        var firstInvalid = null;
147        form.querySelectorAll('[data-dsif-match-key]').forEach(function (input) {
148            clearMatchError(input);
149            var source = getFieldByKey(form, input.getAttribute('data-dsif-match-key'));
150
151            if (input.value && (!source || input.value.trim().toLowerCase() !== source.value.trim().toLowerCase())) {
152                showMatchError(input);
153                if (!firstInvalid) firstInvalid = input;
154            }
155        });
156
157        if (firstInvalid) {
158            event.preventDefault();
159            firstInvalid.focus();
160            firstInvalid.scrollIntoView({ behavior: 'smooth', block: 'center' });
161            return;
162        }
163
164        if (form.getAttribute('data-dsif-recaptcha-type') !== 'v3' || form.dataset.dsifRecaptchaComplete === '1') {
165            setSubmitting(form, true);
166            return;
167        }
168
169        event.preventDefault();
170        var widgetId = form.dataset.dsifRecaptchaWidget;
171        if (!window.grecaptcha || typeof window.grecaptcha.execute !== 'function' || widgetId === undefined) {
172            setSubmitting(form, false);
173            showFormError(form, 'reCAPTCHAの読み込みが完了していません。少し待ってから、もう一度お試しください。');
174            renderRecaptchaWidgets();
175            return;
176        }
177
178        setSubmitting(form, true);
179        try {
180            window.grecaptcha.execute(Number(widgetId), {
181                action: form.querySelector('[data-dsif-recaptcha="v3"]').getAttribute('data-action')
182            });
183        } catch (error) {
184            setSubmitting(form, false);
185            showFormError(form, 'reCAPTCHAの確認を開始できませんでした。ページを再読み込みしてください。');
186        }
187    });
188
189    if (document.readyState === 'loading') {
190        document.addEventListener('DOMContentLoaded', function () {
191            if (window.grecaptcha && typeof window.grecaptcha.render === 'function') {
192                renderRecaptchaWidgets();
193            }
194        });
195    } else if (window.grecaptcha && typeof window.grecaptcha.render === 'function') {
196        renderRecaptchaWidgets();
197    }
198})();