아래의 코드를 한번 참고를 해보시겠어요?

window.addEventListener("DOMContentLoaded", () => {
    const select = document.querySelector("select[name='ca_name']");
    const wrapper = document.getElementById("category-forms");
    const forms = document.querySelectorAll(".cat-form");
    const formElement = document.querySelector("form");

    const toggleForm = (val) => {
        if (!val) {
            wrapper.style.display = "none";
            // 선택 없음 시 모두 disabled 처리 및 required 제거
            forms.forEach(form => {
                form.style.display = "none";
                form.querySelectorAll("input, select, textarea").forEach(el => {
                    el.disabled = true;
                    el.removeAttribute("required"); // required 속성 제거
                });
            });
            return;
        }
        
        wrapper.style.display = "block";

        forms.forEach(form => {
            const isActive = form.dataset.cat === val;
            form.style.display = isActive ? "block" : "none";
            
            form.querySelectorAll("input, select, textarea").forEach(el => {
                if (isActive) {
                    // 활성화된 폼의 경우
                    el.disabled = false;
                    // 원래 required 속성이 있었다면 다시 추가
                    if (el.classList.contains("required")) {
                        el.setAttribute("required", "required");
                    }
                } else {
                    // 비활성화된 폼의 경우
                    el.disabled = true;
                    el.removeAttribute("required"); // required 속성 제거
                }
            });
        });
    };

    // 초기 표시
    toggleForm(select?.value);

    // 셀렉트 값 변경 시 동작
    select?.addEventListener("change", e => toggleForm(e.target.value));

    // 폼 제출 직전에 한 번 더 처리 (안전장치)
    formElement?.addEventListener("submit", (e) => {
        // 현재 선택된 값 기준으로 다시 처리
        const currentValue = select?.value;
        
        forms.forEach(form => {
            const isActive = form.dataset.cat === currentValue;
            form.querySelectorAll("input, select, textarea").forEach(el => {
                if (!isActive) {
                    el.removeAttribute("required");
                    el.disabled = true;
                }
            });
        });
    });
});

또는

// 방법 2: 폼 제출 시 비활성화된 필드들을 임시로 폼에서 제거
formElement?.addEventListener("submit", (e) => {
    const hiddenInputs = [];
    
    forms.forEach(form => {
        if (form.style.display === "none") {
            form.querySelectorAll("input").forEach(input => {
                hiddenInputs.push({
                    element: input,
                    parent: input.parentNode
                });
                input.remove(); // 임시로 DOM에서 제거
            });
        }
    });
    
    // 폼 제출 후 다시 복원 (필요한 경우)
    setTimeout(() => {
        hiddenInputs.forEach(item => {
            item.parent.appendChild(item.element);
        });
    }, 100);
});

답변감사합니다... 둘다 안되는거 같습니다..

필수가 아닌 경우,

required 를 삭제해야 합니다.