0

How to validate a group of Checkboxes

asked 2020-12-02 23:38:54 +0800

DennisLWL gravatar image DennisLWL
31

Hello,

for our Project we need a group of checkboxes (similar to a radiogroup) were u can select multiple checkboxes at once.

We are aware of the Listbox with the attributes checkmark and multiple. The problem is, that we make our Project WCAG conform too. And to navigate through a Listbox with checkmark on isnt very intuitiv. U basically need to hold STRG to select multiple Checkboxes and once u only move in the Listbox with the arrow key, all are deselected except for the row u are hovering....

We could still were able to achive something "similar" to this, with a simple for each and multiple checkboxes within and an command in the viewmodel were we are setting the values. But in addition now, we need to validate the Input, what means that we have a validator that is on our object and need to be triggered if you click/select on checkbox, so for example that if you deselect every input, you will get an error message, that this is an mandatory field and you must at least select one checkbox. This problem could be solved easily with the Listbox mentioned above, and something like this in there:

selectedItems="@bind(foo.bar) @validator('beanValidator', key='p_bar', groups=vm.liveValidationGroup)"

But cause of the Problem mentioned above, we cant realy use the Listbox.

So what with the problems mentioned in short, we need something similar to a radiogroup for Checkboxes were u can selected multiple values and in addition are WCAG conform.

Is there maybe something we dont know about yet, or maybe some ca:aria-tags we can use to make the navigation through the listbox more comfortable?

delete flag offensive retag edit

6 Answers

Sort by ยป oldest newest most voted
0

answered 2020-12-03 15:10:57 +0800

MDuchemin gravatar image MDuchemin
2505 1 6
ZK Team

Hi DennisLWL

In no particular order:

Have you already tried the za11y package? In the most recent ZK version (9.5.0+) you can add this package to enable a number of WCAG improvement to default ZK components.

Regarding validation: Do you want to validate on every single user action, or only when the user clicks the "next" button (or similar)? If the idea is just to prevent the user to go to the next step until they fill the form properly, you could use a form binding with validator. (see the Using validator in form-binding section)

This way, you can check the status of the whole form before accepting or refusing the validation.

There could be a lot of other options. If you'd like to post a small fiddle with your use-case, it could be a good start to talk specifics :)

link publish delete flag offensive edit

Comments

I created a small fiddle and provided further information below :)

DennisLWL ( 2020-12-04 16:49:42 +0800 )edit
0

answered 2020-12-03 15:47:09 +0800

DennisLWL gravatar image DennisLWL
31

HI MDuchemin,

We are on 9.5.0, so yeah, we tried the za11y package. To the validation, we need both, when we click on the next button, and the live validation. The form validation is not a problem. The problem comes with the live validation.

So for example, the user clicks on next, and an error message is shown under the checkboxes that says "this is a mandatory field". And when the user now clicks into one of the checkboxes, the "livevalidator" needs to run, that the error message disappears. And when the users than click in the checkboxes and remove every selection, so that no checkbox is selected again, the error message should appear again.

I can try to create a small fiddle and post it here.

link publish delete flag offensive edit
0

answered 2020-12-03 18:47:06 +0800

DennisLWL gravatar image DennisLWL
31

I created a small fiddle. The example does not contain the validation, but in the listbox we could add it in the selectedItems tag. As Mentioned above we need both validations, on next button and "live validation". The hole thematic is a bit more complex cause we got conditional validation aswell. But for now we just search something where we can add a "livevalidator" to something like a checkboxgroup.

ZKFiddle

So again, basically what we need is something like the Listbox, that u can control in a barrier-free behavior and in the optimal solution is not a table.

link publish delete flag offensive edit
0

answered 2020-12-04 18:01:51 +0800

MDuchemin gravatar image MDuchemin
2505 1 6
ZK Team

Hi Dennis!

Have a look here: https://zkfiddle.org/sample/37s5pku/1-Checkboxgroup-validation-without-Listbox#source-2

The way I'd approach this would be:

1 - using ZK components for all the important bindings. Native components are nice for simple patterns, but I do prefer not to have to question what namespace I operate with in this kind of pattern :D

2 - I'd rather make a 2 dimensional collection, rather than 2 collections that I would try to maintain side by side. (coupling state and labels as a single object for example) You could do that with maps, or other ways. I personally like making a simple bean for that type of usage, keep things clean ;)

3 - Since this is basically ZK components all the way down, anything you are doing on the listbox should be available in a similar way on the forEach of checkbox. Also, since you have single model, if your purpose is to check the model for consistency, you can do that directly from the VM's value, rather than sending these values as command params. (you can definitely pass command params if you want to retrieve "which was the last selected item", etc. I'm only saying that the full model is already there as a vm property)

Let me know if you are still looking for something :)

link publish delete flag offensive edit

Comments

btw you said "in the optimal solution is not a table", did you mean "doesn't use a DOM tree table element" or "doesn't use a table-like model structure"?

MDuchemin ( 2020-12-04 18:04:08 +0800 )edit

Hi Muchemin, thanks again, i will try to answer everything step by step.

What i meant with "in the optimal solution is not a table" is, that our wcag compliance inspector basically told us, that if possible, we shouldnt use any table layout (DOM Element).

DennisLWL ( 2020-12-04 19:09:02 +0800 )edit
  1. we are basically using a wild mix of zk, native and xhtml, to make it as barrierfree as possible (as wierd as it sounds). But we try to use zk elements were we can.

  2. More or less we only got 1 Collection, that other collection is just the "holder" for the arguments, that are shown in the ui.

DennisLWL ( 2020-12-04 19:16:50 +0800 )edit

If we use your example with the 2 dimensional collection, we have to create a new annotation for the validation (if i am correct). Cause if it is a list like we used, we could say @NotEmpty or @NotNull in the attribute in our DTO.

DennisLWL ( 2020-12-04 19:24:01 +0800 )edit
0

answered 2020-12-04 19:27:41 +0800

DennisLWL gravatar image DennisLWL
31

updated 2020-12-04 19:28:52 +0800

The hole thing is way more "complex" than shown is this short fiddle. We are building something like a toolset via templates for many forms/request, a user can send to us.

So we try to build a template like "multiselectcheckbox" were we can simply enter the list with the values the user can select, the list to be validated, some configuration arguments like validation key or group. And that should be it, to hold it as simply as possible for future requests/forms that are coming.

So as mentioned before we could build a template with the listbox. there isnt much more to do. We could insert this template with the information needed in every zul and we are (more or less) good to go. But for the Reasons i already mentionend we unfortunatly cant use it...

I hope our problem is a bit more clear now.

link publish delete flag offensive edit
0

answered 2020-12-07 17:25:04 +0800

cor3000 gravatar image cor3000
6280 2 7

Here a quite general version using a custom converter, converting from a boolean component property (e.g. checkbox.checked) to a membership of a java.util.Set (and vice-versa).

https://zkfiddle.org/sample/1p5e59b/1-checkbox-group-validation

The arguments needed by the converter are the target Set containing the selections and the item to be added/removed to/from the Set. This way each checkbox is bound to the same collection selected and the validator will always receive the whole Set to be validated, inside the validator you can then check inter-dependencies of choices.

link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
3 followers

RSS

Stats

Asked: 2020-12-02 23:38:54 +0800

Seen: 23 times

Last updated: Dec 07 '20

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More