• Hello Fabrik Community

    Fabrik is now in the hands of the development team that brought you Fabrik for Joomla 4. We have recently transitioned the Fabrik site over to a new server and are busy trying to clean it up. We have upgraded the site to Joomla 4 and are running the latest version of Fabrik 4. We have also upgraded the Xenforo forum software to the latest version. Many of the widgets you might have been used to on the forum are no longer operational, many abandoned by the developers. We hope to bring back some of the important ones as we have time.

    Exciting times to be sure.

    The Fabrik 4.0 Official release is now available. In addition, the Fabrik codebase is now available in a public repository. See the notices about these in the announcements section

    We wish to shout out a very big Thank You to all of you who have made donations. They have really helped. But we can always use more...wink..wink..

    Also a big Thank You to those of you who have been assisting others in the forum. This takes a very big burden off of us as we work on bugs, the website and the future of Fabrik.

Single page form with multiple groups - Error messages to show immediately

Status
Not open for further replies.
Hi,
This post is continutation of http://fabrikar.com/forums/index.php?threads/ajax-validation-show-error-messages.47962/.
I also wants to use the same approach as suggested in the previous post to display the error messages. The approach has been mentioned by on this page http://fabrikar.com/forums/index.php?threads/ajax-validation-show-error-messages.47962/.
I can see that the default validations messages are now hidden. But I do not see the tooltip messages appaearing any where. Right now I have added the tooltip to the 'First Name' field. My form is available at http://dbpasn.com/index.php/contact-us/join-us.
Any pointers will be of great help.
Thanks,
Nikhil
 
To be honest, I find this very unintuitive. I have to click on the validation icons to get the tooltip (rather than simply hover) and there is nothing to tell me to click there (like an info pill).

As far as I can see, you have not enabled Ajax validations, so no validations will occur (on e.g. tabbing out of a field) until you submit the form. If you submit a blank form, you get an error message at the top of the refreshed screen, but no indications of what the problems are - no validation messages under the fields, no colouring of the field borders, no pre-shown tooltips, nothing.

My pointers are therefore to go back to the default way that Fabrik operates which is much more intuitive. Once you have done that I will be happy to look at it again to see what can be tweaked.
 
You mentioned one of my threads, so I?ll chime in. I originally suggested this method and I believe it?s a valid way of setting a form up, but only with Ajax validation. As we all know hover states and tool tips are useless in mobile. In fact they can be detrimental as in the screenshot sent to me by a client. They are blocking the labels to each field, can?t be dismissed, and completely prevents filling in the form.

Users will make mistakes when filling in forms, and when they do it is our responsibility to make it just as easy to fix those mistakes as it was to make them in the first place. Having UI elements that can?t be interacted with touch displays do us as developers, our clients, and their clients zero good. Hopefully the Fabrik devs will look into this and see my point moving forward.

49692581-6AC8-4EDE-8976-2658B348B701.jpeg
 
To be honest, I find this very unintuitive. I have to click on the validation icons to get the tooltip (rather than simply hover) and there is nothing to tell me to click there (like an info pill).

And what about mobile users? I don?t know about you but on my client sites over 50% of devices lack a hover state. It used to be much easier to program a site for one screen size and UX but those days are looooong gone.
 
1. Uneven error messages - put the error messages (tooltips) below the elements in the repeat group rather than above them.

2. Some 4 1/2 years ago I wrote a PR to stop the tooltip madness shown - https://github.com/Fabrik/fabrik/pull/980 - but it was never merged. It is so long ago I am no longer sure exactly what it did - but it was designed to stop the overlapping tooltips.

But as you say, in the mean time a lot of people use phones / tablets that do not have a mouse to hover. So we need to think again how Fabrik's UI works.

@prophoto - Can you create a Community Involvement wiki entry for a revised UI model - that doesn't need hover - so as with @nikhil's site perhaps we should have an info icon where there is a tooltip so people know to click / hover to see / hide the tooltip. And stick to error fields below(?) each element to display error messages. We should probably have better default messages - and maybe have automated JS browser validation in parallel with php-based server validation for all validations which don't have bespoke php.

NOTE: I would see the above being part of F4 which is based on BS4 - so we can get a lot better layouts with that.
 
Can you create a Community Involvement wiki entry for a revised UI model - that doesn't need hover - so as with @nikhil's site perhaps we should have an info icon where there is a tooltip so people know to click / hover to see / hide the tooltip. And stick to error fields below(?) each element to display error messages. We should probably have better default messages - and maybe have automated JS browser validation in parallel with php-based server validation for all validations which don't have bespoke php.

I know what a wiki entry is, what's the difference in a "Community Involvement wiki entry"?

Been thinking about this and I may start using form placeholders more often. I just don't see people using info icons, whether or not they hover or click. Agreed on the additional validation not requiring Ajax.
 
In the Wiki Page List (or index) you will find an entry for Community Involvement. Can you create a new page as a child of that entitled "Discusion: Updating the Fabrik UI" and put your thoughts down as to what the UI in F4 should look like for it to be suitable for e.g. devices without mouse hover.
 
I'm all for getting rid of the popup validation errors on AJAX validations. I never liked them, it was something Rob did, to work around something he didn't like with the way it original worked, which basically the same as non-AJAX errors, with a div under/above the element. What he didn't like was, as the divs were only shown when there was an error, this caused the element divs to jump around as the error divs were shown.

-- hugh
 
IMO this is really part of a broader issue which is to make the interface as a whole usable and modern looking, especially:

a. On touch devices; and
b. For accessibility.

A lot of the UI will need to be rewritten to take advantage of BS4 anyway, so we should take the opportunity to think about what it should look like.
 
Hi,
Sorry for replying to it so late. I somehow stopped receiving email notifications from fabrikar and didn't know that there are more comments on this thread.
I went over all the discussions and is it possible to some how display error messages in this fabrikMainError div.

upload_2018-2-14_14-0-41.png

If that is possible then I will hide all the inline error message and that will help me to retain the form indentation.
Thanks,
Nikhil
 
AFAIK, you can't use the Joomla message area for error messages as standard.

Personally, I think that error messages should be placed in the non-Ajax error fields as standard. This makes Ajax and non-Ajax consistent and avoids the flood of tooltips if you have multiple validation issues.

If you want to avoid stuff moving on the page when you get a validation error, then you use CSS to fix the size of the error field.

We could, however, perhaps also put the error also into a tooltip on the error field - so that you can hover or click to see it in the event that the fixed size means you cannot see it all.
 
I've watched many people fill out forms and I don't see the attraction to tooltips. They don't get used enough to rely on them since they just get glossed over. However, if they were to show up automatically as soon as the user clicks in the field that may be useful since it would work for both mobile and desktop devices. IMO that would solve many of the requirements we are outlining here.

As for error messages, I think they should be shown on the bottom of the page above the submit button or as a separate fixed position box at the bottom of the viewport. Currently if you have a long form the user would have to search around to find the error'd field and hope there is a reason for the error, turning it into more of a cat and mouse game. This way we could at least give them some kind of heads up in the box maybe even linking them to the element group that needs fixed.
 
Hi,

Just to let everyone know, I went ahead and added the custom java script to the form. This script hides all the in-line error messages and displays them at the top main error section. My solution might not be very efficient and elegant. I am sure there might be better alternatives. I just wanted to post my script in here in case it helps someone.
JavaScript:
jQuery(document).ready(function () {
        var mainErrorSection=jQuery('div.fabrikMainError:not(".fabrikHide")');
        if(mainErrorSection.length != 0){
                jQuery('div.fabrikErrorMessage.help-inline:first').each(function(index) {
                        mainErrorSection.wrapInner('<span style="font-weight:bold"></span>');
                });
                jQuery('fieldset#group3 div.fabrikErrorMessage.help-inline').each(function(index) {
                        jQuery(this).hide();
                        if(index==0){
                                mainErrorSection.append('<br/><br/><span style="font-weight:bold">General Info</span><br/>');
                        }
                        mainErrorSection.append('<br/><i data-isicon="true" class="icon-exclamation-sign "></i> '+jQuery(this).text());
                });
        }
})
 
Status
Not open for further replies.
We are in need of some funding.
More details.

Thank you.

Members online

Back
Top