https://panasonic.jp/mypage/profile/js/setup-from-validation.js

1function setupFormValidation(buttonId, inputIds) {
2    const button = document.getElementById(buttonId);
3    if (!button) return;
4
5    const isRealButton = button.tagName.toLowerCase() === 'button' ||
6        (button.tagName.toLowerCase() === 'input' && button.type === 'submit');
7
8    function validateInputs() {
9        const isValid = inputIds.every(id => {
10            const input = document.getElementById(id);
11            if (!input) return false;
12
13            switch(input.type) {
14                case 'checkbox':
15                    return input.checked;
16                case 'radio':
17                    const radioGroup = document.getElementsByName(input.name);
18                    return Array.from(radioGroup).some(radio => radio.checked);
19                case 'text':
20                case 'email':
21                case 'password':
22                    // 値が空でないことをチェック
23                    if (input.value.trim() === '') return false;
24
25                    // pattern属性が設定されている場合はパターンチェックを行う
26                    if (input.pattern) {
27                        const pattern = new RegExp(input.pattern);
28                        return pattern.test(input.value);
29                    }
30                    return true;
31                default:
32                    return true;
33            }
34        });
35
36        if (isRealButton) {
37            button.disabled = !isValid;
38        } else {
39            if (isValid) {
40                button.classList.remove('button--disabled');
41            } else {
42                button.classList.add('button--disabled');
43            }
44        }
45    }
46
47    inputIds.forEach(id => {
48        const input = document.getElementById(id);
49        if (!input) return;
50
51        if (input.type === 'checkbox' || input.type === 'radio') {
52            input.addEventListener('change', validateInputs);
53        } else {
54            input.addEventListener('input', validateInputs);
55        }
56    });
57
58    validateInputs();
59}