1. Fabrik 3.8.1 has been released. It is mostly bug fixes and feature enhancements, but does include two new plugins (push notifications, and the sequence element). As usual we strongly recommend testing the new release on a sandbox if your application is mission critical, and always do an Akeeba backup before updating.

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

Discussion in 'Community' started by nikhil.pa@gmail.com, Jan 28, 2018.

  1. nikhil.pa@gmail.com

    nikhil.pa@gmail.com New Member

    Level: Community
    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
     
  2. Sophist

    Sophist Moderator

    Level: Community
    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.
     
  3. nikhil.pa@gmail.com

    nikhil.pa@gmail.com New Member

    Level: Community
    Ok, I went back to the default way that Fabrik operates. But now when I submit the alignment of the fields goes all wrong. You can have a look at http://dbpasn.com/index.php/contact-us/join-us.

    Thanks for helping me out here.

    -Nikhil
     
  4. prophoto

    prophoto Member

    Level: Community
    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
     
  5. prophoto

    prophoto Member

    Level: Community
    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.
     
  6. Sophist

    Sophist Moderator

    Level: Community
    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.
     
  7. prophoto

    prophoto Member

    Level: Community
    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.
     
  8. prophoto

    prophoto Member

    Level: Community
  9. Sophist

    Sophist Moderator

    Level: Community
    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.
     
  10. cheesegrits

    cheesegrits Support Gopher Staff Member

    Level: Professional
    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
     
  11. Sophist

    Sophist Moderator

    Level: Community
    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.
     
  12. nikhil.pa@gmail.com

    nikhil.pa@gmail.com New Member

    Level: Community
    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
     
  13. Sophist

    Sophist Moderator

    Level: Community
    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.
     
  14. prophoto

    prophoto Member

    Level: Community
    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.
     

Share This Page