Display error message on the page

[softforge]

I have noticed that when I have a form that does not submit via AJAX, the error message is displayed below the element after the page reloads.

However, when the page does get submitted via AJAX (eg. with the content plugin), the error message only appears in the tip box which can only be seen by hovering over the error icon.

Many of our users are missing this message so I have made a slight modification to replicate the same behaviour when submitting with AJAX.

In element.js I added the following line just before the break statement in the fabrikError case:

this.getContainer().getElements('.fabrikShowError').set('html', msg);

The resulting code looks like this:

        case 'fabrikError':
            a = new Element('a', {'href': '#', 'title': msg, 'events': {
                'click': function (e) {
                    e.stop();
                }
            }}).adopt(this.alertImage);
            errorElements[0].adopt(a);
            Fabrik.tips.attach(a);
            this.getContainer().getElements('.fabrikShowError').set('html', msg);
            break;

Then, make sure the following code is in the template where you want the message to appear in the form when submitting via AJAX:

<div class="fabrikErrorMessage fabrikShowError">
    <?php echo $element->error;?>
</div>

That's it. If the fabrikShowError class doesn't exist then everything continues to work as it does currently (no JS errors). It is now very easy to add the class wherever you want the error message to show.

I hope this can make it into Fabrik as it is backwards compatible and makes the AJAX submission consistent. I am open to suggestions on a better way to do this but this was the easiest way I could find to get the desired result.

Thanks for considering!

 

[cheesegrits]

Is there any chance you could fork the master from github, and submit that as a pull request?

The reason I ask is that this a) makes it a zillion times easier and quicker for us to merge your changes in, and b) it keeps the issue on our radar, by having a pull request in the queue.

BTW, have you tested to see what happens if you have multiple validation errors?

From a quick look at your code, it seems that each one would overwrite the previous one in the div. Which could be equally frustrating for those who don't see the Warning icons, as they would correct one error, resubmit, and immediately get another one, etc.

-- hugh