Problems with repeat groups rendered as table

Bauer

Well-Known Member
I was experimenting this weekend with repeat groups.
I found a few major problems with repeat groups rendered as as table.
  1. Tips are not shown - not even the Tip question mark and Validation star icon indicators in the label that are shown when the repeats are rendered as a UL. I think that the tip and validation moseover icons/labels should be shown over each column in the table. (Not triggered over each value in the table cells in that column like is done in a list when the 'Show in list' Tip option is checked. That is just plain distracting - and would be especially so if the element is editable. )
  2. There is no indication of a failed Validation when Ajax validation is enabled. The spinner works and the 'td' cell gets the correct class names added (fabrikError error has-error) - but there is no css styling to border the cell in red and the fabrikErrorMessage span is empty. (In the attached image I have added td.fabrikError { border: 1px solid #ff0000; } to the template css so that the border shows in red.)
  3. So when the form is submitted, there is nothing indicating exactly what or where any validation error(s) might be. The system message is always simply, "Some parts of your form have not been correctly filled in" - but without the red borders or individual element error message shown - that is pretty much useless - especially without any Tips showing that might help guide the user or indicate what is expected.:confused:
 

Attachments

  • repeatgroupTable.PNG
    repeatgroupTable.PNG
    47.9 KB · Views: 38
Last edited:
1. Fixed in PR#1939 waiting to be merged,

2. The field with the validation error has been displaced vertically which suggests that some sort of message is being attempted, so is the error message there in HTML but not shown or missing completely? Can you post the HTML for the td in error pls. If you specify an explicit error message does it show? Are there any messages in the JS Console?
 
1. Cool.:cool:
2. Correct. (And there are no messages in js console)
When rendered as a table, the following span code is being inserted in the td - before the div.fabrikElement.
HTML:
<span class="fabrikErrorMessage" style="opacity: 1;"><a href="#" data-original-title="" title=""><i class="icon-exclamation-sign"></i></a></span>
When rendered as a list, that .fabrikErrorMessage is put after the div.fabrikElement as another div (not a span) like this...
HTML:
<div class="fabrikErrorMessage" style="opacity: 1;"></div>
And there is no a.href ='# 'anchor tag.

When rendered as a list, the label - which contains the Tip and Validation text as well as the control-label class, the opts and data attributes, AND the error notice - is put before the div.fabrikElement - like this...
HTML:
<label for="test_list_joined___price_0" class="fabrikLabel control-label fabrikHover fabrikTip" opts="{&quot;setwidth&quot;:&quot;276&quot;,&quot;tiptitle&quot;:&quot;Price&quot;,&quot;tipuselabel&quot;:&quot;0&quot;,&quot;heading&quot;:&quot;Validation&quot;,&quot;formTip&quot;:true,&quot;position&quot;:&quot;top&quot;,&quot;trigger&quot;:&quot;hover&quot;,&quot;notice&quot;:true}" data-original-title="" error="<span> Must be > 0</span>">
    <i data-isicon="true" class="icon-question-sign small "></i> <i data-isicon="true" class="icon-star small "></i> Price        </label>
(See screen snip attachment.)

Whether repeats are rendered as a list or table, the .fabrikErrorMessage container for elements containing validation errors is blank. Although, when rendered as a list everything appears to pretty much work as expected - yet the table option is a complete failure.

So I don't even understand the purpose of that .fabrikErrorMessage object anymore - though it does make sense using it in the case where the repeats are rendered as a table (because there are no individual labels to trigger the popover for each element in the repeats). I'll leave that all up to you to decide how it should work, as you have a better understanding of 'the big picture' here than I do.:confused:

To further explain the screen snip...
  • 'Enter the price' is the Tip text
  • 'Performs a greater or less than test' is the Validation text provided by the isgreaterorlessthan validation plugin
  • 'Must be > 0' is the Error message text that was added to the Validation parameters.
 

Attachments

  • Screen Shot 03-25-18 at 07.59 AM.PNG
    Screen Shot 03-25-18 at 07.59 AM.PNG
    13 KB · Views: 14
Last edited:
1. Fixed in PR#1939 waiting to be merged,

Can you fix the conflicts, and I'll look at that one. I guess you'll need to merge master back in to your branch.

Unfortunately form.js got it's line endings messed up (a huge mess with PHP Storm, after an upgrade changed the version of Git For Windows it uses, which I'm still trying to recover from), so shows as one huge conflict.

And I've added a feature which touched some of the code you changed (per group "no data" messages).

I also had to hack in a little "fix" for "no data" messages in repeat groups, in the case where:

Repeat count is 0.
User adds a repeat.
Submits, but validation fails.
Page reloads, but repeats are shown as empty, although the data is actually there and if you hit Add, you get your filled in repeat.

https://github.com/Fabrik/fabrik/commit/586ce8f9fa531c961705903bf72fe4b977ec7f1a

I had to fix it in a hurry for an important client. So make sure that fix is tiehr not necessary with your changes, or gets incorporated.

-- hugh
 
We are in need of some funding.
More details.

Thank you.

Members online

Back
Top