https://fortune-cookie.tokyo/assets/js/validation.js?v=1.0.610

1/**
2 * フレームワーク共通の処理をまとめたもの
3 * common.js
4 */
5
6function validation(form_data, callback = null) {
7
8    let url = home_url + 'validation';
9
10    let param = { 'submit_flg': '' };
11    param['callback'] = callback;
12
13    ajax_fetch(url, form_data, callback_validation, param);
14
15}
16
17/**
18 * validation後の処理
19 * @param {} data 
20 * @param {*} param 
21 */
22async function callback_validation(data, param) {
23
24    await hiddenMessageAll();
25
26    await hiddenNoticeAll();
27
28    await removeAllEntryField();
29
30    await removeAllInputError();
31
32    await addInputError(data);
33
34    await changeSubmitButton(param);
35
36    await clearValidation(param);
37
38    await hiddenSpinner();
39
40    await doCallback(data, param);
41
42}
43
44//追加メッセージを一端全て削除
45async function hiddenMessageAll() {
46    var elems = document.getElementsByClassName('entry-message');
47    if (elems.length > 0) {
48        for (var i = 0; i < elems.length; i++) {
49            var e = elems[i];
50            while (e.lastChild) {
51                e.removeChild(e.lastChild);
52            }
53        }
54    }
55}
56
57//タブに表示される「notice」を全て削除
58async function hiddenNoticeAll() {
59    var elems = document.getElementsByClassName('error-caution');
60    if (elems.length > 0) {
61        for (var i = 0; i < elems.length; i++) {
62            var e = elems[i];
63            while (e.lastChild) {
64                e.removeChild(e.lastChild);
65            }
66        }
67    }
68}
69
70//entry-fieldのエラースタイルを削除
71async function removeAllEntryField() {
72    const elems = Array.from(document.getElementsByClassName('entry-field'));
73    elems.forEach(elem => {
74        elem.classList.remove('input-error');
75        elem.parentNode.classList.remove('input-error');
76    });
77}
78
79//input errorのエラースタイルを削除
80async function removeAllInputError() {
81    const elems = Array.from(document.getElementsByClassName('input-error'));
82    elems.forEach(elem => {
83        elem.classList.remove('input-error');
84        elem.parentNode.classList.remove('input-error');
85    });
86}
87
88//エラーを付与
89async function addInputError(data) {
90
91    if (data.length === null || data.length === 0) return;
92
93    var tab = [];
94
95    for (var name in data) {
96        // 追加する要素を作成します
97        var newContent = '<div class="error-message add-message">' + data[name] + '</div>';
98
99        /**
100         * 配列の場合は、dataの中には、name.1 => 'エラーメッセージ'となっている。
101         * HTML上のIDは、name[1]の形式なので、name.1.company => name[1]に変換する必要がある。
102         * variable変数を使用している場合、dataの中には、name.1.company => 'エラーメッセージ'となっている。
103         * HTML上のIDは、name[1][company]の形式なので、name.1.company => name[1][company]に変換する必要がある。
104         */
105        const hasPeriod = name.includes(".");
106        if(hasPeriod){
107            const nameArr = name.split(".");
108            name = nameArr[0];
109            if(nameArr[1]) name += '['+ nameArr[1] + ']';
110            if(nameArr[2]) name += '['+ nameArr[2] + ']';
111        }
112
113        //エラーメッセージを表示させる
114        var elem = document.getElementById(name + '-message');
115        if (elem) {
116            elem.insertAdjacentHTML('beforeend', newContent);
117
118            //タブ要素を取得　タブがある場合
119            var tab_elem = elem.closest(".tab-pane");
120
121            //タブidを配列に格納
122            if (tab_elem) {
123                var tab_id = tab_elem.getAttribute("id");
124                tab.push(tab_id);
125            }
126        }
127
128        //入力項目の背景を赤くする
129        if (form) {
130            var targetElements = form.getElementsByClassName(name);
131        }
132        if (targetElements.length !== 0) {// name属性が存在する場合
133            [].forEach.call(targetElements, function (elems) {
134                if (elems.type == 'checkbox' || elems.type == 'radio') {
135                    elems.parentNode.classList.add("input-error");
136                } else {
137                    elems.classList.add("input-error");
138                }
139            })
140        }

141        else {// name属性が存在しない場合（variableフィールド）
142            var elems = document.getElementById(name);
143            if (elems) {
144                elems.classList.add("input-error");
145            }
146        }
147
148    }
149
150    await displayTabIcon(tab);
151
152}
153
154//タブ上にエラーアイコンを表示
155async function displayTabIcon(tab) {
156    if (tab.length) {
157        let set = new Set(tab);//tab_idの重複排除
158        let tab_deduplication = Array.from(set);//setから配列へ変換
159        for (const tab_id of tab_deduplication) {
160            var nav_item_elem = document.getElementById("nav-item-" + tab_id);
161            nav_item_elem.insertAdjacentHTML('beforeend', '<div class="error-caution ' + tab_id + '" data-bs-toggle="tooltip" data-bs-placement="top" title="入力エラーがあります。" ><i class="fas fa-exclamation-circle"></i></div>');
162        }
163    }
164}
165
166//submitボタンの処理
167async function changeSubmitButton(param) {
168    /*submitボタンの処理*/
169    var newContent = '<div class="error-message add-message">データにエラーがあるか、<br>必要な入力が完了していません。</div>';
170
171    //エラーメッセージを表示させる
172    if (param['message-id']) {
173        var submit_message = document.getElementById(param['message-id']);
174    } else {
175        var submit_message = document.getElementById('submit-message');
176    }
177
178    if (submit_message && !submit_message.hasChildNodes()) {
179        submit_message.insertAdjacentHTML('beforeend', newContent);
180    }
181
182    //ボタンを無効化する
183    if (param['submit-id']) {
184        var submit_elem = document.getElementById(param['submit-id']);
185    } else {
186        var submit_elem = document.getElementById('form-submit');
187    }
188    if (submit_elem) {
189        submit_elem.classList.add("btn-disabled");
190    }
191}
192
193/**
194 * エラーが存在しない場合
195 * @param {*} param 
196 */
197async function clearValidation(param) {
198    let elems = document.getElementsByClassName('input-error');
199
200    //エラーメッセージがない場合
201    if (elems.length === 0) {
202        //エラーメッセージを消す
203        if (param['message-id']) {
204            var submit_message = document.getElementById(param['message_id']);
205        } else {
206            var submit_message = document.getElementById('submit-message');
207        }
208        if (submit_message != null && submit_message.hasChildNodes()) {
209            submit_message.removeChild(submit_message.lastChild);
210        }
211
212        //ボタンを有効化する
213        if (param['submit-id']) {
214            var submit_elem = document.getElementById(param['submit-id']);
215        } else {
216            var submit_elem = document.getElementById('form-submit');
217        }
218        if (submit_elem) {
219            submit_elem.classList.remove("btn-disabled");
220        }
221
222    }
223
224}
225
226function doCallback(data, param) {
227    if (data.length === null || data.length === 0) {
228        if (param['callback']) {
229            param['callback'](data, param);
230        }
231    }
232}