1. Fabrik 3.9 has been released. If you have updated Joomla to 3.9, this is a required update.
    Dismiss Notice

Ajax Validation - Inline error messages

Discussion in 'Community' started by joomlamate, Jan 12, 2020.

  1. joomlamate

    joomlamate Member

    Level: Community
    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.
    Code (Text):

    /* 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 (Text):

    <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: Jan 13, 2020
    MeAppBuilder and startpoint like this.
  2. MeAppBuilder

    MeAppBuilder Member

    Level: Community
    Thank you. Having the same issue.
    Can't inject the list/form components (Add, Edit) correct into my template.

    Ajax will show everything in modal, which will work.
    Just those error messages are giving me headaches.

    I might try your solution tonight.

    Where can I find the default.php of the bootstrap form template?
     
    Last edited: Jan 21, 2020
  3. cheesegrits

    cheesegrits Support Gopher Staff Member

    Level: Community
    Making this a built in option is fairly near the top of my To Do list, I have a project on the books which is going to need it. So hopfully within the next month or so.

    -- hugh
     
    lousyfool likes this.

Share This Page