<label for="phone" class="rich-input is-required">
    <div class="rich-input__label">{% trans %}Telefon{% endtrans %}</div>
    <div class="rich-input__input-wrap">
        {{ form_widget(phone, {'attr': {'class': 'input'}}) }}
        <svg class="rich-input__error-icon">
            <use href="/build/svg/_icons.svg#input-error"></use>
        </svg>
    </div>
    <div class="rich-input__error-msg">
        {% trans %}Neplatná hodnota{% endtrans %}
    </div>
</label>

<script>
    (function () {
        document.querySelectorAll('label[for="phone"]').forEach(phoneLabel => {
            const form = phoneLabel.closest('form');
            const phoneInput = phoneLabel.querySelector('input');
            const phonePattern = /^\+?\d{3}\s?\d{3}\s?\d{3}(\s?\d{3})?$/;

            phoneInput.addEventListener('input', function () {
                phoneLabel.classList.remove('error');
            });

            form.addEventListener('submit', function (event) {
                if (!phoneInput.required) return;

                if (!phonePattern.test(phoneInput.value)) {
                    event.preventDefault();
                    event.stopPropagation();
                    phoneLabel.classList.add('error');
                }
            }, true); // listen in capture phase
        });
    })();
</script>