Scroll to highest empty textfield only (Error Validation)

advanced-prototyping
#1

Hello,

I’ve attached a general example of what I’m trying to do. Click on the Submit button to see what it does.

111219_ErrorValidationScrollToHighest.rp (2.7 MB)

Overall, I’m trying to create form validation, where the page will scroll to the highest textfield that is blank, out of all blank textfields on the page. Right now, I have it so on click of the submit button it checks if any of the fields are empty and if so, it sets that field to an error state. I also have it scroll to that textfield if it’s empty. The problem is, it will run through every action and scroll to each one starting from top of the page to the bottom. I’m trying to get it to only scroll to the highest textfield/widget on the page out of all empty textfields/error states. Not to just scroll to every one, as that looks broken. It should only scroll to the top one that is in error state and stop scrolling.

I cannot figure this out after trying for a while. It’s as if the page has to know 2 states, if it’s an error state and where the highest field is on the page, out of all error states - then scroll to the highest one.

I searched high and low for anything like this and didn’t see anyone posting on it, or on Google Searching, unfortunately.

Any help on this would be greatly appreciated.

Jake

#2

Hi Jake!

It looks like a good way to do this would be to change the “If” cases for your submit button to “Else If” cases. Creating an If/Else If chain makes it so that the OnClick event works through all possible cases until one case’s conditions are met. When that one case’s conditions are met, the case fires and no other “Else If” cases in that chain fire afterwards. You can right-click on a case to toggle the If/Else If property:

image
image.png880×555 89.8 KB

You can also learn more about If/Else If chains on our site here:

I’ve attached an edited version of your file for your review as well. I hope this helps!

111219_ErrorValidationScrollToHighest-edited-else-if.rp (2.7 MB)

#3

Hi Chelsea!

Thanks a lot for this. I actually did end up getting it to work, also. Earlier, I did try the Else If statement, which did work and wouldn’t scroll to the others, but it wouldn’t throw the error state panel on all of the empty fields. I think that was a point I was missing in my post. But, I ended up setting up extra variables for error states and separated the scroll to cases from the set to error state cases. For the most part it seems to be working in my file. Attached is the update of the file, showing what it’s doing. It will check if any of the fields are empty, change to the error state on all, and then use the else if statements to run through the scroll to states, if the variable of that row is set to “Error”.

Link to file:
111219_ErrorValidationScrollToHighest_Update.rp (2.7 MB)

Also, I may be overdoing this a bit, but again it seems to work decent.

Again, thank you! Appreciate the response.

#4

Hi Jake,

Oh I see what you mean! Your updated project looks good to me. :slight_smile: The “If” statements for those error messages should help ensure that all errors are caught and displayed correctly on the page, and the “If/Else” chain for the scrolling behavior should keep it so that the page only scrolls once, and to the widget that’s placed at the top-most location on the page.

Thanks for the update on this!

closed #5

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.