Как не производить валидацию скрытых в collapse полей формы?

Question

[JustShooter]

Приветствую. Пишу небольшой учебный проект, используя Bootstrap 5 без jQuery, и столкнулся с такой проблемой которую сам не смог решить. Есть форма, в форме используется одно поле ввода и поле . Так же часть полей спрятаны в классе , который открывается при выборе определенного пункта из списка . Отсюда вопрос, как отключить HTML5 валидацию на скрытых в collapse полях input, или используя plain JS проверять на валидность не скрытые поля, и поля в collapse блоке, если они видны?
Мой HTML:

<form class="row g-3 needs-validation" accept-charset="UTF-8" action="/admin/someAction" method="post">
        <div class="form-floating mb-3">
            <input class="form-control" name="shopName" id="shopName" type="text" placeholder="Shop name" required="" minlength="3" maxlength="250" pattern="^[А-Яа-яA-Za-z0-9]+(?:\s+[А-Яа-яA-Za-z0-9]+)*$">
            <label for="shopName">Shop name</label>
        </div>
        <div class="form-floating mb-3">
            <select class="form-select" name="shopAddress" id="shopAddress" aria-label="Shop name" required="">
                <option selected="" disabled="" value="">
                    Make your choise
                </option>
                
                    <option value="1">
                        some value 1
                    </option>
                
                    <option value="2">
                        some value 2
                    </option>
                
                    <option value="3">
                       some value 3
                    </option>
                
                <option value="new">
                    create new
                </option>
            </select>
            <label for="shopAddress">Address</label>
        </div>

        
        <div class="collapse" id="newAddress" style="">
		
            <div class="form-floating mb-3">
                <input class="form-control" name="city" id="city" type="text" placeholder="city" required="" minlength="3" maxlength="250" pattern="^[А-Яа-яA-Za-z0-9]+(?:\s+[А-Яа-яA-Za-z0-9]+)*$">
                <label for="city">City</label>
            </div>
            <div class="form-floating mb-3">
                <input class="form-control" name="street" id="street" type="text" placeholder="Street" required="" minlength="3" maxlength="250" pattern="^[А-Яа-яA-Za-z0-9]+(?:\s+[А-Яа-яA-Za-z0-9]+)*$">
                <label for="street">Street</label>
            </div>
            <div class="form-floating mb-3">
                <input class="form-control" name="buildingNumber" id="buildingNumber" type="text" placeholder="Building number" required="" minlength="3" maxlength="250" pattern="^[0-9]+(?:[А-Яа-яA-Za-z0-9]+)*$">
                <label for="buildingNumber">Building number</label>
            </div>
           
        </div>
        <div class="d-grid">
            <button class="btn btn-primary btn-lg" type="submit">Save</button>
        </div>
    </form>

Мой код инициализации показа скрытого collapse при выборе select value new:

document.addEventListener("DOMContentLoaded", function () {
        let select = document.getElementById("shopAddress");
        let element = document.getElementById("newAddress");
        let myCollapse = new bootstrap.Collapse(element);

        select.addEventListener("change", function () {
            if (select.options[select.selectedIndex].value === 'new') {
                myCollapse.show();
            } else {
                myCollapse.hide();
            }
        });
   });

И с этим кодом то же есть проблема, почему-то, при загрузке страницы изначально поле collapse видно, но при смене select пропадает...

Answer 1

[JustShooter]

Хм, сам же и решил :)

document.addEventListener("DOMContentLoaded", function () {

        let inputs = document.getElementsByTagName("input");
        let selects = document.getElementsByTagName("select");

        let select = document.getElementById("shopAddress");
        let element = document.getElementById("newAddress");
        let myCollapse = new bootstrap.Collapse(element, {toggle: false});
        select.addEventListener("change", function () {
            if (select.options[select.selectedIndex].value === 'new') {
                for (let x of inputs) {
                    if (x.parentElement.parentElement === element) {
                        x.setAttribute('required', '');
                    }
                }
                for (let y of selects) {
                    if (y.parentElement.parentElement === element) {
                        y.setAttribute('required', '');
                    }
                }
                myCollapse.show();
            } else {
                for (let z of inputs) {
                    if (z.parentElement.parentElement === element) {
                        z.removeAttribute('required');
                    }
                }
                for (let i of selects) {
                    if (i.parentElement.parentElement === element) {
                        i.removeAttribute('required');
                    }
                }
                myCollapse.hide();
            }
        });

    });