193
Views
16
Comments
Solved
JS to have custom errors on form
Application Type
Reactive

Hello all,

I have a component to make fully validation of record in Server Side, this component returns a list of errors in JSON.

The Idea is to create a custom ID in each field and this JSON tell me this ID to put the error below the field like we have in Form Validation. I think the only way to do this wil be with JS, someone already did this or have idea for where I should start?

Thanks in advance

2021-09-06 15-09-53
Dorine Boudry
 
MVP
Solution

So here's the result of some experimenting : see attached oml for 2 example options

The demo is making use of a component for model based validation I made earlier, so if you don't want to download that from the forge, you'll have to copy the logic to your code instead of implementing this demo.

OS makes available the valid and invalid features through their javascript API, so no need to have a large if...then tree.

If you want to try it out without implementing on your end, you can access mine temporarily with user 'ForumDemo' pwd 'ForumDemo'

Dorine


DemoValidationFeedback.oml
2023-12-14 09-56-57
Yogesh Javir

Hey,

When button click, call javascript function,check there wheather widge has value or not using document.GetElementById.

If no value then use below mentioned line to show respected error message and add css class not-valid to respective widget.

document.GetElementByClassNAme('validation-massage')[your widget index].style.display.block so validation message will get populated on youra screen.

Thanks

Yogesh


2023-08-28 07-00-10
Paulo Torres
Champion

Hello Yogesh,

Thanks for replying. It seems a good option.

I'll check and let you know :)

Happy new year

2023-12-14 09-56-57
Yogesh Javir

THANKS 

Happy new year to you and your family. 

Yogesh

2023-08-28 07-00-10
Paulo Torres
Champion

This solution is good but check the smart solution of Dorine :) She used the API's of OS.

2021-09-06 15-09-53
Dorine Boudry
 
MVP

Hi Paulo,

you don't necessarily need JS for this, I think.

You need 2 things :

1) a mapping of any given error in your JSON to the input(s).  

This could be as simple or as complex as you like, some errors might for example relate to 2 inputs (type : startdate must be smaller then enddate)  So this will be a little more complex then just returning a single input identifier in your JSON.  

I'm also not a fan of the server side having to be in the know about what exact id's to set so the right widgets get a message on the client side, to me that feels like a little too tight coupling between your core and your UI.

So I think each error in your JSON (btw, why JSON, why not just a typed list with structure attributes ?) should have a unique error code, and there should be some client action doing that mapping from error code to what inputs have to be flagged.


2) For the actual flagging of the inputs, you can just set the Valid and ValidationMessage properties in a normal Assign, no need to use JS here.


Dorine


Just a general remark, I don't know why you decided to only validate on the server side, but you are foregoing the opportunity of faster user feedback from additional client side validations, and also in Reactive, the application effectively runs in the browser, only going to the server when it is appropriate/needed, so it feels to me like you are going a bit against that design.  

That being said, there are always validations that can't be done client side, and doing the above will show the result of them in a uniform way to your user, the user won't notice difference between client side validations (built-in or otherwise) and server side validations, which is a nice thing.

2023-08-28 07-00-10
Paulo Torres
Champion

Hello Dorine,

Thanks for replying :)

Valid and ValidationMessage it's an option but will requires flow, if's etc... Exactly what we want to avoid :)

That's why we decided to go with this solution, save time in our developments if we don't need several IF's and big flows to validate everything.

We are validating with Built-in Validations when we use form, but this component can read all DB specifications and validate automatically, also we can send extra validations for this component like pattern etc.

Happy New Year :)


2021-09-06 15-09-53
Dorine Boudry
 
MVP

yes, 

I understand that you are doing validations on server side based on the metadata.

My answer is about how you implement the feedback to the user in the UI, I am not suggesting any big flows or IFs.

As long as it is single field validations (i.e. length, mandatory, foreign key,pattern,...) the mapping is simple, I assumed that the validations might also incorporate business rules, which can also be about valid combinations of data, and that makes the decision of what exact inputs to highlight more complex.

As an example of what I mean with mapping, you could decide to simply map errors based on entity.attribute.  Meaning that each validation error that comes back, has one (or more) specific attribute(s) linked to it, and on your client side, each input that you want to involve in this mechanism, is somehow linked to the attribute.  

And this is where you could decide to use javascript for this instead of a low-code action, I see now what you were asking.  Some time ago, I made a validation component that does something similar, so as an exercise, I'll try out some options for implementing the found errors as validation color and message on the relevant inputs, I'll share here later.

Dorine  

2023-08-28 07-00-10
Paulo Torres
Champion

I understand your point of view :)

Thanks a lot Dorine

2021-09-06 15-09-53
Dorine Boudry
 
MVP
Solution

So here's the result of some experimenting : see attached oml for 2 example options

The demo is making use of a component for model based validation I made earlier, so if you don't want to download that from the forge, you'll have to copy the logic to your code instead of implementing this demo.

OS makes available the valid and invalid features through their javascript API, so no need to have a large if...then tree.

If you want to try it out without implementing on your end, you can access mine temporarily with user 'ForumDemo' pwd 'ForumDemo'

Dorine


DemoValidationFeedback.oml
2023-08-28 07-00-10
Paulo Torres
Champion

Hello Dorine,

First of all thanks for spent your time trying to help me :)

I'll check your code and try to adapt in mine. and I'll give you feedback.

Thanks a lot

2023-08-28 07-00-10
Paulo Torres
Champion

Hello Dorine,

Thanks for your help and thanks for to waste time with me. I already learn something about those API's of OS, I was not aware :)

I used your first example, fits perfectly in my code. I just removed the true action.


2021-09-06 15-09-53
Dorine Boudry
 
MVP

Glad to help.

I thought the true action might be needed in case user resubmits after fixing some but not all validations, don´ t they stay red in that case ??

2023-08-28 07-00-10
Paulo Torres
Champion

You are the BEST :)

It's a good point, I will test and let you know.

Thanks

2023-08-28 07-00-10
Paulo Torres
Champion

You are right :)

Anyway when everything it's ok I'll redirect to the List. But I'll keep the True action anyway :)

Thanks again

2020-09-01 10-42-42
Stefano Valente

The solutions given will do the trick, but since you are building this in Reactive applications, i would advise to do all possible validations clientside. meaning those validations where you dont need to go to the server.


For instance: you can check the format of a zipcode field in javascript/client action and let the user know instantly this is not valid.

Ofcourse you must always do the validation (again) on server side.

2023-08-28 07-00-10
Paulo Torres
Champion

Hello Stefano,

We are validating with Built-in Validations when we use form, but this component can read all specifications of DB and validate automatically, also we can send extra validations for this component like pattern etc.

We can avoid several IF's and big flows.

Happy new year :)

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.