https://minerfield.com/lp/dinorex/assets/js/form.js

1const beforeSubmit = (e) => {
2    e.preventDefault();
3    grecaptcha.ready(() => {
4        grecaptcha.execute('6LdH5AUrAAAAAAHuBNu5zNeXuoeiA3LogS4y3307', { action: 'homepage' }).then((token) => {
5            let recaptchaResponse = document.getElementById('recaptchaResponse');
6            recaptchaResponse.value = token;
7            let url = new URL(window.location.href);
8            let params = url.searchParams;
9            let utm_source = document.getElementById('utm_source');
10            let utm_medium = document.getElementById('utm_medium');
11            let utm_campaign = document.getElementById('utm_campaign');
12            let utm_content = document.getElementById('utm_content');
13            let utm_term = document.getElementById('utm_term');
14            utm_source.value = params.get('utm_source');
15            utm_medium.value = params.get('utm_medium');
16            utm_campaign.value = params.get('utm_campaign');
17            utm_content.value = params.get('utm_content');
18            utm_term.value = params.get('utm_term');
19        }).then(() => {
20            if (validate()) {
21                document.forms['contactForm'].submit();
22            }
23        })
24    });
25}
26
27const FORM_NAME_LIST = {
28    name: "氏名",
29    name_kana: "フリガナ",
30    corporate_name: "法人名",
31    corporate_name_kana: "法人名フリガナ",
32    department: "部署名",
33    position: "役職",
34    input_main_tp: "電話番号",
35    input_main_em: "メールアドレス",
36    area: "都道府県",
37    content: "お問い合わせ内容",
38    consult_date_1: "第1希望の日付",
39    consult_date_2: "第2希望の日付",
40    consult_date_3: "第3希望の日付",
41    consult_time_1: "第1希望の時間",
42    consult_time_2: "第2希望の時間",
43    consult_time_3: "第3希望の時間",
44};
45const validate = () => {
46    let result = true;
47    let consultDateTimeList = [];
48    Object.keys(FORM_NAME_LIST).forEach((key) => {
49        let elements = document.getElementsByName(key);
50        let error_selector = `${key}_error_box`;
51        let error_elements = document.getElementById(error_selector);
52        if (error_elements) error_elements.textContent = "";
53
54        if (
55            key === "name" ||
56            key === "name_kana" ||
57            key === "corporate_name" ||
58            key === "corporate_name_kana" ||
59            key === "department" ||
60            key === "position" ||
61            key === "input_main_tp" ||
62            key === "input_main_em" ||
63            key === "area"
64        ) {
65            if (elements[0].value.toString().length > 255) {
66                error_elements.textContent = `「${FORM_NAME_LIST[key]}」は255文字以下で入力してください`;
67                result = false;

68                return;
69            }
70        }
71
72        if (
73            key === "content"
74        ) {
75            if (elements[0].value.toString().length > 1000) {
76                error_elements.textContent = `「${FORM_NAME_LIST[key]}」は1000文字以下で入力してください`;
77                result = false;
78                return;
79            }
80        }
81
82        if (
83            key === "name" ||
84            key === "name_kana" ||
85            key === "corporate_name" ||
86            key === "corporate_name_kana" ||
87            key === "input_main_tp" ||
88            key === "input_main_em" ||
89            key === "area"
90        ) {
91            if (elements[0].value === "") {
92                error_elements.textContent = `「${FORM_NAME_LIST[key]}」が入力されていません`;
93                result = false;
94                return;
95            }
96        }
97
98        if (key === "name_kana") {
99            if (!elements[0].value.match(/^[ァ-ヶー 　]*$/)) {
100                error_elements.textContent = "「フリガナ」はカタカナで入力してください";
101                result = false;

102                return;
103            }
104        }
105
106        if (key === "corporate_name_kana") {
107            if (!elements[0].value.match(/^[ァ-ヶー 　]*$/)) {
108                error_elements.textContent = "「法人名フリガナ」はカタカナで入力してください";
109                result = false;
110                return;
111            }
112        }
113
114        if (key === "input_main_em") {
115            if (!elements[0].value.match(/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/)) {
116                error_elements.textContent = "「メールアドレス」の形式に誤りがあります";
117                result = false;
118                return;
119            }
120        }
121
122        if (key === "input_main_tp") {
123            if (!elements[0].value.match(/^[0-9\-]*$/)) {
124                error_elements.textContent = `「${FORM_NAME_LIST[key]}」は数字で入力してください`;
125                result = false;
126                return;
127            }
128
129            const pattern = /^(0[789]0-\d{4}-\d{4}|0\d{1,4}-\d{2,4}-\d{4}|\d{10,11})$/;
130            if (!pattern.test(elements[0].value)) {
131                error_elements.textContent = `「${FORM_NAME_LIST[key]}」の形式に誤りがあります`;
132                result = false;

133                return;
134            }
135        }
136
137        if (key.includes("consult_date_")) {
138            let consultId = Number(key.split("_")[2]);
139            let consultTimeName = `consult_time_${consultId}`;
140            let consultTimeEl = document.getElementsByName(consultTimeName);
141            let bothSelected = elements[0].value !== "" && consultTimeEl[0].value !== "";
142            let eitherSelected = elements[0].value !== "" || consultTimeEl[0].value !== "";
143
144            if (eitherSelected && document.getElementsByName("consult_date_1")[0].value === "") {
145                document.getElementById("consult_date_1_error_box").textContent = "「第1希望」が選択されていません";
146                result = false;
147                return;
148            }
149
150            if (eitherSelected && consultId === 3 && document.getElementsByName("consult_date_2")[0].value === "") {
151                document.getElementById("consult_date_2_error_box").textContent = "「第2希望」が選択されていません";
152                result = false;

153                return;
154            }
155
156            if (elements[0].value === "" && consultTimeEl[0].value !== "") {
157                error_elements.textContent = `「${FORM_NAME_LIST[key]}」が選択されていません`;
158                result = false;
159                return;
160            }
161            if (elements[0].value !== "" && consultTimeEl[0].value === "") {
162                error_elements.textContent = `「${FORM_NAME_LIST[consultTimeName]}」が選択されていません`;
163                result = false;
164                return;
165            }
166
167            let consultDateTime = `${elements[0].value} ${consultTimeEl[0].value}`;
168            if (bothSelected && consultDateTimeList.includes(consultDateTime)) {
169                let index = consultDateTimeList.indexOf(consultDateTime);
170                error_elements.textContent = `「第${index+1}希望」と同じ日時が選択されています`;
171                result = false;
172                return;
173            }
174            consultDateTimeList.push(consultDateTime);
175        }
176
177    });
178    return result;
179}