Reactive Dropdown Tags: how to validate

Hi there,

In a Web Reactive app, I'm using the Dropdown Tags widget for multiple selection. I would like to include validation and notify the user that at least one selection is mandatory. 

The way I'm doing this is by using an input (not visible) which is set to invalid when there is not a selection done in the Dropdown Tags and I'm displaying a message when the input is not valid however, I don't know how to change the border of the Dropdown Tags to red. I know I should use the extended class but so far nothing I tried have worked.. 

Can anyone help please or suggest perhaps another way to achieve this validation? BTW this Dropdown Tags widget is inside a web block that is inside another web block that is used on a screen.

Thanks

Lorena

Hi,

You can check the list is empty or not that bind with the widget like below.

If your list ex.GetCountries.LIst is Empty then validation message should come


Salman Ansari wrote:

Hi,

You can check the list is empty or not that bind with the widget like below.

If your list ex.GetCountries.LIst is Empty then validation message should come


That is how I'm setting the valid runtime property of the input, that is hidden, to false; by checking if the list is empty. My problem is not displaying the message (you can see I have a red message under the Dropdown Tags) my problems is to add the red border to the DropdownTags because this widget doesn't have a valid runtime property as for instance an input widget does (if I set the valid runtime property to false in a input widget then I have the message and the red border around the input). 

 

Add this class into the widget based on condition  .Not_Valid

select.Not_Valid, input.Not_Valid {
    visibility: visible;outline: none;
    border: 1px solid rgba(255, 0, 0, 0.7);
    box-shadow: 0px 0px 10px orangered;
}
Solution

Hi Lorena,

Based on the mentioned use-case, I created a sample app... hope this helps you :)

Please refer the attached .oml solution file.


Regards,

Benjith Sam

Solution

Hi Benjith,

Thanks for your suggestion, It works :).

I did some adjustments to make it fit my needs:  split the JavaScript in the DropdownTagsOnChange: AddErrorClass  JavaScript moved it to the validation action happening inside a web block and I the RemovErrorClass JavaScript moved it to  the Onchange action of the DropdownTags. 

Thanks a lot :)

Lorena Lopez wrote:

Hi Benjith,

Thanks for your suggestion, It works :).

I did some adjustments to make it fit my needs:  split the JavaScript in the DropdownTagsOnChange: AddErrorClass  JavaScript moved it to the validation action happening inside a web block and I the RemovErrorClass JavaScript moved it to  the Onchange action of the DropdownTags. 

Thanks a lot :)

You're most welcome, Lorena :)

I'm glad that it helped you and thank you for sharing the final implementation :) 


Regards,

Benjith Sam