#378945: use Bootstrap for errormessage-invalid

content-elements/form/checkbox/prototype/template.twig

@@ -20,9 +20,7 @@
                 <i class="bi bi-info-circle" data-bs-toggle="tooltip" data-bs-custom-class="bsi-tooltip" role="tooltip" aria-label="{{ checkboxInfoText }}"></i>
             </div>
             <div data-bsi-element-part="{{ checkboxFormTextPartId }}" class="form-text">{{ checkboxInfoText }}</div>
-            <div x-init="initRequiredError" class="invalid-feedback">
-                <label data-bsi-element-part="{{ checkboxErrorRequiredPartId }}" role="alert" aria-live="assertive" aria-atomic="true">{{ checkboxErrorRequiredText }}</label>
-            </div>
+            <div data-bsi-element-part="{{ checkboxErrorRequiredPartId }}" class="invalid-feedback"> {{ checkboxErrorRequiredText }} </div>
         </div>
     </div>
 {% endapply %}

content-elements/form/form-container/form.js

@@ -34,10 +34,7 @@ Alpine.data('formElement', () => ({
     if (!this.form.checkValidity()) {
       e.preventDefault();
       e.stopPropagation();
-      this._validateFormFieldInput();
-      this._validateTelInput();
       this._validateRadioInput();
-      this._validateCheckboxInput();
     }
     this.form.classList.add('was-validated');
   },
@@ -67,34 +64,10 @@ Alpine.data('formElement', () => ({
     }
   },
 
-  _validateFormFieldInput() {
-    let formFieldInputs = this.form.getElementsByClassName('bsi-form-field-element');
-    for (const formFieldInput of formFieldInputs) {
-      let input = formFieldInput.getElementsByClassName('bsi-form-field-input')[0];
-      if (!input.checkValidity() && !input.value) {
-        formFieldInput.getElementsByClassName('invalid-feedback')[0].style.display = "block";
-      } else {
-        formFieldInput.getElementsByClassName('invalid-feedback')[0].style.display = "none";
-      }
-    }
-  },
-
-  _validateTelInput() {
-    let telInputs = this.form.getElementsByClassName('bsi-form-tel-input');
-    for (const telInput of telInputs) {
-      let input = telInput.getElementsByClassName('bsi-form-tel-input-element')[0];
-      if (!input.checkValidity() && !input.value) {
-        telInput.getElementsByClassName('bsi-tel-input-error-required')[0].style.display = "block";
-      } else {
-        telInput.getElementsByClassName('bsi-tel-input-error-required')[0].style.display = "none";
-      }
-    }
-  },
-
   _validateRadioInput() {
     let radioElements = this.form.getElementsByClassName('bsi-form-radio-element');
-    let radioValid = false;
     for (const radioElement of radioElements) {
+      let radioValid = false;
       let radioInputs = radioElement.getElementsByClassName('form-check-input');
       for (const radioInput of radioInputs) {
         if (radioInput.checked || !radioInput.hasAttribute('required')) {
@@ -109,16 +82,4 @@ Alpine.data('formElement', () => ({
       }
     }
   },
-
-  _validateCheckboxInput(){
-    let CheckboxInputs = this.form.getElementsByClassName('bsi-form-checkbox-element');
-    for (const CheckboxInput of CheckboxInputs) {
-      let input = CheckboxInput.getElementsByClassName('form-checkbox-input')[0];
-      if (input.checked || !input.hasAttribute('required')) {
-        CheckboxInput.getElementsByClassName('invalid-feedback')[0].style.display = "none";
-      } else {
-        CheckboxInput.getElementsByClassName('invalid-feedback')[0].style.display = "block";
-      }
-    }
-  },
 }))

content-elements/form/form-field-tel/prototype/form-tel-input.js

@@ -9,7 +9,6 @@ Alpine.data('telInput', () => ({
   onlyCountries: '',
   preferredCountries: '',
   errormessageInvalid: '',
-  requiredErrorElement: null,
   invalidErrorElement: null,
   labelElement: null,
   labelText: null,
@@ -18,7 +17,6 @@ Alpine.data('telInput', () => ({
   init() {
     this.rootElement = this.$root;
     this.inputField = this.$refs.inputField;
-    this.requiredErrorElement = this.$refs.requiredErrorField;
     this.invalidErrorElement = this.$refs.invalidErrorField;
 
     let countryData = window.intlTelInputGlobals.getCountryData();
@@ -78,11 +76,6 @@ Alpine.data('telInput', () => ({
   },
 
   validateInput() {
-    if (!this.$el.value && this.$el.hasAttribute('required')) {
-      this.requiredErrorElement.style.display = "block";
-    } else {
-      this.requiredErrorElement.style.display = "none";
-    }
     this.iti.setNumber(this.iti.getNumber(intlTelInputUtils.numberFormat.E164)); // trigger formatting the number
     this._validate();
   },

content-elements/form/form-field-tel/prototype/template.twig

@@ -37,9 +37,7 @@
                 <label data-bsi-element-part="{{ phonePinnedCountriesPartId }}" class="preferred-countries">ch,de,at</label>
             </div>
 
-            <div x-ref="requiredErrorField" class="bsi-tel-input-error-required invalid-feedback">
-                <label data-bsi-element-part="{{ phoneErrorRequiredPartId }}" role="alert" aria-live="assertive" aria-atomic="true">{{ phoneErrorRequiredText }}</label>
-            </div>
+            <div data-bsi-element-part="{{ phoneErrorRequiredPartId }}" class="invalid-feedback"> {{ phoneErrorRequiredText }} </div>
             <div x-ref="invalidErrorField" class="bsi-tel-input-error-invalid" hidden="true" aria-hidden="true">
                 <label data-bsi-element-part="{{ phoneErrorInvalidPartId }}" class="errormessage-invalid" role="alert" aria-live="assertive" aria-atomic="true">{{ phoneErrorInvalidText }}</label>
             </div>

content-elements/form/form-field/prototype/form-field.js

@@ -10,7 +10,6 @@ Alpine.data('formField', () => ({
   fp: null,
   minDate: null,
   maxDate: null,
-  requiredErrorElement: null,
   invalidErrorElement: null,
   errorMessageInvalid: '',
 
@@ -24,10 +23,6 @@ Alpine.data('formField', () => ({
     }
   },
 
-  initRequiredError() {
-    this.requiredErrorElement = this.$el;
-  },
-
   initInvalidError() {
     this.invalidErrorElement = this.$el;
     this.errorMessageInvalid = this.invalidErrorElement.getElementsByClassName('errormessage-invalid')[0].innerText;
@@ -40,11 +35,6 @@ Alpine.data('formField', () => ({
       label.style.transform = 'scale(0.85) translateY(-0.5rem) translateX(0.15rem)';
     }
 
-    if (!this.inputEl.value && this.inputEl.hasAttribute('required')) {
-      this.requiredErrorElement.style.display = "block";
-    } else {
-      this.requiredErrorElement.style.display = "none";
-    }
     this._validateMailInput();
     this._validateNumberInput();
     this._validateTextInput();
@@ -132,6 +122,9 @@ Alpine.data('formField', () => ({
     if (valid) {
       this.invalidErrorElement.setAttribute('hidden', 'true');
       this.invalidErrorElement.setAttribute('aria-hidden', 'true');
+      this.querySelector('invalid-feedback').style.display="none";
+      this.querySelector('invalid-feedback').setAttribute('hidden', 'true');
+      this.querySelector('invalid-feedback').setAttribute('aria-hidden', 'true');
     } else {
       this.invalidErrorElement.removeAttribute('hidden', 'true');
       this.invalidErrorElement.removeAttribute('aria-hidden', 'true');

content-elements/form/form-field/prototype/template.twig

@@ -22,9 +22,7 @@
                 <i class="bi bi-info-circle" data-bs-toggle="tooltip" data-bs-custom-class="bsi-tooltip" role="tooltip" aria-label="{{ formFieldInfoText }}"></i>
             </div>
             <input x-init="initFormFieldInput" x-on:change="validateInput" type="text" class="form-control bsi-form-field-input" id="field" value="">
-            <div x-init="initRequiredError" class="invalid-feedback">
-                <label data-bsi-element-part="{{ formFieldErrorRequiredPartId }}" role="alert" aria-live="assertive" aria-atomic="true">{{ formFieldErrorRequiredText }}</label>
-            </div>
+            <div data-bsi-element-part="{{ formFieldErrorRequiredPartId }}" class="invalid-feedback"> {{ formFieldErrorRequiredText }} </div>
             <div x-init="initInvalidError" class="format-invalid-feedback" hidden="true" aria-hidden="true">
                 <label data-bsi-element-part="{{ formFieldErrorInvalidPartId }}" class="errormessage-invalid" role="alert" aria-live="assertive" aria-atomic="true">{{ formFieldErrorInvalidText }}</label>
             </div>

content-elements/form/poll/prototype/poll.js

@@ -80,29 +80,13 @@ Alpine.data('formPoll', () => ({
     radio.addEventListener('change', function() {
       range.value = label.getAttribute('data-value');
       thisForm._updateStatus(range);
-      thisForm._validateInput();
     });
 
     div.appendChild(radio);
     div.appendChild(label);
     container.appendChild(div);
   },
 
-  _validateInput() {
-    let pollValid = false;
-    let pollInputs = this.root.querySelectorAll('input[type="radio"]');
-    for (const pollInput of pollInputs) {
-      if (pollInput.checked || !pollInput.hasAttribute('required')) {
-        pollValid = true;
-        break;
-      }
-    }
-    if (!pollValid) {
-      this.requiredErrorElement.style.display = 'block';
-    } else {
-      this.requiredErrorElement.style.display = 'none';
-    }
-  },
 
   _updateStatus(range) {
     let radioItems = this.root.querySelectorAll('input[type="radio"]');

content-elements/form/poll/prototype/template.twig

@@ -43,9 +43,7 @@
                 <label data-bsi-element-part="{{ pollLeftPartId }}">{{ pollLabelLeftText }}</label>
                 <label data-bsi-element-part="{{ pollRightPartId }}">{{ pollLabelRightText }}</label>
             </div>
-            <div x-init="initRequiredError" class="invalid-feedback">
-                <label data-bsi-element-part="{{ pollErrorRequiredPartId }}" role="alert" aria-live="assertive" aria-atomic="true">{{ pollErrorRequiredText }}</label>
-            </div>
+            <div data-bsi-element-part="{{ pollErrorRequiredPartId }}" class="invalid-feedback"> {{ pollErrorRequiredText }} </div>
         </div>
     </div>
 {% endapply %}

content-elements/form/select/prototype/template.twig

@@ -23,9 +23,7 @@
             <select x-init="initSelectField" class="form-select" id="select">
                 <option value="">{{ selectOptionText }}</option>
             </select>
-            <div class="invalid-feedback">
-                <label data-bsi-element-part="{{ selectErrorRequiredPartId }}" role="alert" aria-live="assertive" aria-atomic="true">{{ selectErrorRequiredText }}</label>
-            </div>
+            <div data-bsi-element-part="{{ selectErrorRequiredPartId }}" class="invalid-feedback"> {{ selectErrorRequiredText }} </div>
         </div>
     </div>
 {% endapply %}

content-elements/form/text-area/prototype/template.twig

@@ -20,9 +20,7 @@
                 <i class="bi bi-info-circle" data-bs-toggle="tooltip" data-bs-custom-class="bsi-tooltip" role="tooltip" aria-label="{{ textAreaInfoText }}"></i>
             </div>
             <textarea class="form-control" id="field" rows="5" value=""></textarea>
-            <div class="invalid-feedback">
-                <label data-bsi-element-part="{{ textAreaErrorRequiredPartId }}" role="alert" aria-live="assertive" aria-atomic="true">{{ textAreaErrorRequiredText }}</label>
-            </div>
+            <div data-bsi-element-part="{{ textAreaErrorRequiredPartId }}" class="invalid-feedback"> {{ textAreaErrorRequiredText }} </div>
         </div>
     </div>
 {% endapply %}

core/main/index.js

@@ -16,7 +16,6 @@ import '../../content-elements/form/form-field-tel/prototype/form-tel-input';
 import '../../content-elements/form/form-field/prototype/form-field';
 import '../../content-elements/form/poll/prototype/poll';
 import '../../content-elements/form/radio/prototype/radio';
-import '../../content-elements/form/checkbox/prototype/checkbox';
 import '../../content-elements/form/select/prototype/select';
 
 // start Alpine.js AFTER importing all module scripts