Multi Select List Widget validation message focus issue

Am using Multi Select List Widget for selecting the items.

On click of submit button am checking if user do not select any value in the multi select list widgets then am setting the valid and validation message as shown in the screenshot.


Am able to see the Validation message which I had set to the multi select list widget when submit button is clicked.

My issue is web page is not scrolling to the first invalid multi select List box.

I have placed Input_FocusFirstInvalid widget in the preparation, so that when page get refresh it should scroll to first widget having error message.


If I replace Multi select List widget with Combo box widget it work fine, on page refresh it scroll to first widget displaying error.


Any input is really appreciated.

Please give me a clear idea about the issues. you can paste the screens of the process. So it will help me to answer properly. Waiting,

I need littlebit more information Hridesh,


But in order to use validation you need a widget that supports it: The mulitselect widget should be in a form widget for example. is this the case?

Furthermore : i don't think the input_focusFirstInvalid will work in a preparation. You need to validate in a ajax submit action.


Stefano Valente wrote:

I need littlebit more information Hridesh,


But in order to use validation you need a widget that supports it: The mulitselect widget should be in a form widget for example. is this the case?

Furthermore : i don't think the input_focusFirstInvalid will work in a preparation. You need to validate in a ajax submit action.



I have placed the input_focusFirstInvalid in preparation and it also work, it scroll the page to the first widget to show validation message . This is working good if i use the combo box widget.

But if i use Multi select List widget   it show the validation message but won't scroll to the first Multi select widget My main issue : why scrolling doesn't happen if i use the Multi select widget 


Hi Hridesh,


Are you able to create a completely new little oml, with only this logic on it, an repeat your observed behaviour ?  If yes, then please share it here, if no, then you must explore what it is you are doing different or extra in your current project that prevents the screen from scrolling to show your multi select.  Maybe you have some javascript messing with your focus?


I have tried it out, and it always works, whether I put the multiselect inside a form or not, whether i do the Input_FocusFirstInvalid inside the save action or the preparation.


Dorine

Hi,

I have attached the sample OML file.

It has 10 multi select listbox, with submit button at the bottom set to method type server- submit.

In the Submit screen action i have set the validation message to the Listbox8, and in the preparation i used InputFocusFirstInvalid.

On click of submit button it shows me error message, but it won't scroll to the first error Listbox.

I want  the screen to scroll to first error multi select listbox.


Thanks.



Hridesh Prajapati wrote:

Hi,

I have attached the sample OML file.

It has 10 multi select listbox, with submit button at the bottom set to method type server- submit.

In the Submit screen action i have set the validation message to the Listbox8, and in the preparation i used InputFocusFirstInvalid.

On click of submit button it shows me error message, but it won't scroll to the first error Listbox.

I want  the screen to scroll to first error multi select listbox.


Thanks.




When you submit your screen and form is reset. All entered values are gone. this is why your form goes to the top and focuses on the 1st.


You should do the focusfirstinvalid in the submit server action, which should be set to Ajax submit, and do the validation in that server action first.


Like this:






Stefano Valente wrote:

Hridesh Prajapati wrote:

Hi,

I have attached the sample OML file.

It has 10 multi select listbox, with submit button at the bottom set to method type server- submit.

In the Submit screen action i have set the validation message to the Listbox8, and in the preparation i used InputFocusFirstInvalid.

On click of submit button it shows me error message, but it won't scroll to the first error Listbox.

I want  the screen to scroll to first error multi select listbox.


Thanks.




When you submit your screen and form is reset. All entered values are gone. this is why your form goes to the top and focuses on the 1st.


You should do the focusfirstinvalid in the submit server action, which should be set to Ajax submit, and do the validation in that server action first.


Like this:







Thanks Stefano ,

I got the point you mentioned in reply.

In my actual application code, I have to set the Submit button to server  as am saving data to server. Also after submitting the data to server my screen preparation get called and  i am populating all the multi select list box  with saved data. 

Reason for doing this , i have to save the form in as draft i.e. whatever data present on form save it and show error for the empty field.


It just that my page is not getting scroll to the first error multi select list box widget.  For your information if i replace multi select list box with combo box  or text field it works fine




Hi Hridesh,

This is the JavaScript executed by Input_FocusFirstInvalid:

"try { 
  if (OsIsIE()) { 
    document.selection.empty();
  } 
  outsystems.internal.$('.Not_Valid:first').focus();
} catch(e) {}"

And this is the HTML generated for your page, viewing the invalid "list".

Do you notice that the Not_Valid class is added to a DIV, not the input? This is because of the DropDownSelect widget completely changes the ListBox.

The problem? Divs, normally, do not receive focus.
The solution, found on many answers in stack overflow, was to add a tabindex=0 to the div, so it will receive the focus. I tested using a RunJavaScript before the Input_FocusFirstInvalid, passing the following code:

"document.getElementsByClassName('Not_Valid')[0].setAttribute('tabindex', '0');"

And it worked.

Cheers

P.S. This may cause problems in your 'tabindex'.

P.S. 2 I moved everything to the Screen Action and used AjaxRefresh to update the screen (a div around everything), as Submit is required ONLY if you are submitting files to the server.