fix: properly show bootstrap 5 error messages

Author: Jakub Jeřábek

src/Rendering/Bootstrap5HorizontalRenderer.php

@@ -38,7 +38,7 @@ class Bootstrap5HorizontalRenderer extends AbstractBootstrapHorizontalRenderer
 	  '.odd' => null,
 	  'description' => 'span class="form-text"',
 	  'requiredsuffix' => '',
-	  'errorcontainer' => 'span class="form-text"',
+	  'errorcontainer' => 'div class="invalid-feedback"',
 	  'erroritem' => '',
 	  '.required' => 'required',
 	  '.text' => 'text',
@@ -71,13 +71,25 @@ public function render(Form $form, $mode = null): string
 		$onlyButton = Helpers::onlyOneButton($form);
 
 		foreach ($form->getControls() as $control) {
+			if ($control instanceof Controls\BaseControl && $control->hasErrors()) {
+				$control->getControlPrototype()->addClass('is-invalid');
+			}
+
 			if ($control instanceof Controls\BaseControl
 			&& !($control instanceof Controls\Checkbox)
 			&& !($control instanceof Controls\CheckboxList)
 			&& !($control instanceof Controls\RadioList)) {
 				$control->getLabelPrototype()->addClass($this->replacePlaceholders('col-form-label col-%colsLabel%'));
 			}
 
+			// the .invalid-feedback expects .is-invalid on the same level to be displayed
+			if ($control->hasErrors() 
+			&& ($control instanceof Controls\Checkbox 
+			|| $control instanceof Controls\CheckboxList
+			|| $control instanceof Controls\RadioList)) {
+				$control->getSeparatorPrototype()->setName('div')->addClass('is-invalid');
+			}
+
 			switch (true) {
 				case $control instanceof Controls\Button:
 					if (!Helpers::htmlClassContains($control->getControlPrototype(), 'btn')) {

src/Rendering/Bootstrap5InlineRenderer.php

@@ -36,7 +36,7 @@ class Bootstrap5InlineRenderer extends DefaultFormRenderer
 	  '.odd' => null,
 	  'description' => 'span class="form-text"',
 	  'requiredsuffix' => '',
-	  'errorcontainer' => 'span class="form-text"',
+	  'errorcontainer' => 'div class="invalid-feedback"',
 	  'erroritem' => '',
 	  '.required' => 'required',
 	  '.text' => 'text',
@@ -68,6 +68,10 @@ public function render(Form $form, $mode = null): string
 		$onlyButton = Helpers::onlyOneButton($form);
 
 		foreach ($form->getControls() as $control) {
+			if ($control instanceof Controls\BaseControl && $control->hasErrors()) {
+				$control->getControlPrototype()->addClass('is-invalid');
+			}
+
 			if ($control instanceof Controls\BaseControl) {
 				$control->getLabelPrototype()->addClass('col-form-label');
 			}
@@ -89,6 +93,10 @@ public function render(Form $form, $mode = null): string
 				case $control instanceof Controls\Checkbox:
 				case $control instanceof Controls\CheckboxList:
 				case $control instanceof Controls\RadioList:
+					// the .invalid-feedback expects .is-invalid on the same level to be displayed
+					if ($control->hasErrors()) {
+						$control->getSeparatorPrototype()->setName('div')->addClass('is-invalid');
+					}
 					$control->getSeparatorPrototype()->setName('div')->addClass('form-check form-check-inline');
 					$control->getControlPrototype()->addClass('form-check-input');
 					$control->getLabelPrototype()->addClass('form-check-label');

src/Rendering/Bootstrap5VerticalRenderer.php

@@ -37,7 +37,7 @@ class Bootstrap5VerticalRenderer extends DefaultFormRenderer
 	  '.odd' => null,
 	  'description' => 'span class="form-text"',
 	  'requiredsuffix' => '',
-	  'errorcontainer' => 'span class="form-text"',
+	  'errorcontainer' => 'div class="invalid-feedback"',
 	  'erroritem' => '',
 	  '.required' => 'required',
 	  '.text' => 'text',
@@ -69,6 +69,10 @@ public function render(Form $form, $mode = null): string
 		$onlyButton = Helpers::onlyOneButton($form);
 
 		foreach ($form->getControls() as $control) {
+			if ($control instanceof Controls\BaseControl && $control->hasErrors()) {
+				$control->getControlPrototype()->addClass('is-invalid');
+			}
+
 			if ($control instanceof Controls\BaseControl && !$control instanceof Controls\Checkbox) {
 				$control->getLabelPrototype()->addClass('col-form-label');
 			}
@@ -90,10 +94,14 @@ public function render(Form $form, $mode = null): string
 				case $control instanceof Controls\Checkbox:
 				case $control instanceof Controls\CheckboxList:
 				case $control instanceof Controls\RadioList:
+					// the .invalid-feedback expects .is-invalid on the same level to be displayed
+					if ($control->hasErrors()) {
+						$control->getSeparatorPrototype()->setName('div')->addClass('is-invalid');
+					}
 					$control->getSeparatorPrototype()->setName('div')->addClass('form-check');
 					$control->getControlPrototype()->addClass('form-check-input');
 					$control->getLabelPrototype()->addClass('form-check-label');
-					break;
+								break;
 			}
 		}