joomlamate
Member
Fabrik 3.9.x
Unless I am missing something, there isn't a way to make error messages to appear inline with each field with AJAX Validation Error Messages and on multi-page forms.
So, I am posting here my solution for anyone that would like to have inline error messages and to drop (hide) the popovers tooltips, until fabrik provides a final solution.
With some CSS we can hide the popovers and we can use JS mutationObserver to watch for changes on the elements of the forms pertaining to the validation errors. Then we grab the error message of each field and append it to the already existing fabrikErrorMessage div.
CSS
So here is the CSS, which can go to the custom.css of the bootstrap form template.
Javascript
The JS can be inserted at the bottom of the default.php of the bootstrap form template.
Of course, create a template override in your actual template's html folder for the bootstrap form and there do your customizations.
Note: The placement of Fields Tips in the form can affect the order of the html elements inside each field. So, if in your form you are placing the tips as inline, then it is possible that you will have to adjust the target in your js, using more or less the nextElementSibling property, as the fabrikErrorMessage div might be closer of farther of the label. Inspect your form and act accordingly.
Unless I am missing something, there isn't a way to make error messages to appear inline with each field with AJAX Validation Error Messages and on multi-page forms.
So, I am posting here my solution for anyone that would like to have inline error messages and to drop (hide) the popovers tooltips, until fabrik provides a final solution.
With some CSS we can hide the popovers and we can use JS mutationObserver to watch for changes on the elements of the forms pertaining to the validation errors. Then we grab the error message of each field and append it to the already existing fabrikErrorMessage div.
CSS
So here is the CSS, which can go to the custom.css of the bootstrap form template.
Code:
/* This hides all the tooltips, both of the validation errors and those containing field info */
.popover {
display: none !important;
}
/* The following rules are for the appended error nodes into the dom. Customize as per your liking */
.fabrikForm .fabrikErrorMessage {
display: none;
position: absolute;
font-size: 11px;
font-weight: 100;
line-height: 15px;
top: 8px;
right: 12px;
}
.fabrikForm .error .fabrikErrorMessage {
display: block;
}Javascript
The JS can be inserted at the bottom of the default.php of the bootstrap form template.
Code:
<script>
var mutationObserver = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.target.attributes.hasOwnProperty('error')) {
var target = mutation.target.nextElementSibling.nextElementSibling;
var errorMsg = mutation.target.attributes.error.value;
var node = document.createElement('span');
node.className = "errorMsg";
node.innerHTML = errorMsg;
target.appendChild(node);
}
});
});
/* Start listening for changes in the fabrikForm HTML element focusing on the error attribute (inside each form label element)*/
mutationObserver.observe(document.querySelector('.fabrikForm'), {
attributes: true,
attributeFilter: ['error'],
subtree: true,
});
</script>Of course, create a template override in your actual template's html folder for the bootstrap form and there do your customizations.
Note: The placement of Fields Tips in the form can affect the order of the html elements inside each field. So, if in your form you are placing the tips as inline, then it is possible that you will have to adjust the target in your js, using more or less the nextElementSibling property, as the fabrikErrorMessage div might be closer of farther of the label. Inspect your form and act accordingly.
Last edited:
