I am looking to hook my custom validation - ensuring that a field value is entered and confirmed into the registration app.
Currently the validation works, however the user can go ahead and confirm without having to fix the validation error unlike the inbuilt validations of required, regex and numeric
How can I ensure that a user does not move on to the next section before they fix the validation error
Can we do it simply using some ajax calls? When the property loses the active status then we can trigger the validation functions through ajax(React or angular also fine).
BTW we need to implement those validations functions in the connected js files or implement some REST APIs to check the validations from the backend.
@suthagar23 No need for AJAX or REST in my case, just how to hook custom validations into the flow for the Simple UI.
ohh, Sry @ssmusoke I misunderstood your question 
Highlighting that element with a red color shadowed box, and display the error message next to that element ( or belong to that element) would be better for the UI. When the user moves to next element without changing that errors, that element should keep that red box and error information until he fixes it.
@suthagar23 exactly, and in addition the user should not be able to move to another section until the errors are resolved - for example like the name and date of birth sections, plus other in-built validations within the registration app Simple UI flow
the user should not be able to move to another section until the errors are resolved
Here, The application should disable other validated fields from the user input. But most of the cases, We follow the way to re-indicate the miss placed fields (already indicated with error highlights) while they click the Next or Submit button. If we disable the fields, then the users might be confused about those. Is it make sense?
@ssmusoke, Here’s the JavaScript submit button handler. It looks like it runs through a validation process using Ajax when the button is pushed.
Craig
@craigappl I am trying to hook my custom validation into the simple ui flow, the challenge is even when errors are displayed the user can still move to the next section, unlike the inbuilt validations
Those scripts would be housed in UI Commons in the navigator folder.
You’ll have to look through all of those scripts. The navigator.js primarily handles keyboard movement between fields. The navigatorHandlers.js seems to listen for change events when users move the focused field. The validators.js seems to be the thing that handles the validation. I’m not great with JavaScript, but hopefully, you can create something similar in your custom validation logic by looking at these things.
@craigappl okay thanks - had hoped u had run into a similar problem. Will provide feedback when I figure it out
@ssmusoke did you ever figure this out? I want to add some basic validation for an email address, to ensure it looks like [char]@[char], as well as phone numbers.