Validation on listform components

[rick.eddy]

We have a listform component that display email addresses. These email addresses are editable fields. We were given a requirement to validate the entered email addresses, are a valid format. If they are not a valid format, they want the field highlighed in red. We can check the changed element's value and validate it but, when we add style classes the the element, something like this... elements.emailaddr.addStyleClasses("error"). The style gets applied to ALL elements with this name. So, if we have 5 email addresses showing in the listform component... we now have all 5 text boxes have the style class applied.

How can we make it so just the element associated with the validation error have the style class applied?
On inspection it appears as if servoy gives each instantiation of the element the original id with an _1 or _2 etc. is there a way to programmatically gain access to that element?

[swingman]

Not sure how to do this with a list-form-component.
In a Data Grid, you can use RowStyleClassProvider and a calculated field to add style classes to specific records.

[paronne]

In a Data Grid, you can use RowStyleClassProvider and a calculated field to add style classes to specific records.

Hi,

in LFC ( List-Form-Component ) same pattern applies. You can target the element at runtime with elements.emailaddr.addStyleClasses("error") since indeed will be applied to ALL rows.
You can use the rowStyleClassDataprovider to apply styleClass to entire row conditionally.
You need to set a styleClass also to the email address field, so you can target it with CSS ( in the example below i named it form-emailaddr )

example:
You can have as rowStyleClassDataprovider a calculation returning the styleClass form-invalid-emailaddr if the email dataprovider is not valid.

Code: Select all

.form-invalid-emailaddr  .form-emailaddr {
     border-color: red;
}

Regards,
Paolo