Display Validation Message In A Custom Location

Display Validation Message In A Custom Location

  

I want to know how to display an error message in a free space as it show in the Picture below


I found this link but it didn't help me, so anybody can help...?!

https://success.outsystems.com/Documentation/Development_FAQs/How_to_display_input_validation_messages_in_a_custom_location


Best Regards

Hind Ahmed

Hi Hind,

Are you trying it on Mobile or Web?

Is the link you pasted not working, meaning that you still seeing the messages inline to the fields?


Shashank...

Hi Hind,

I just tried and it worked for me. You just need to add the given CSS code at page level, and it will hide the default messages. Then you can write your own validation and assign the message to your expression and put a Ajax refresh on the Expression.

Let me know if this still do not work.

Shashank...

Hi Hind Ahmed,


You can do this by using validation property of button. 


Set the input textbox to mandatory


Check your input control valid or not and show error message based on that also check form.Valid property



You can get more details about validation in web development course, user this link

https://www.outsystems.com/learn/lesson/857/input-validation/

Shashank Diwan wrote:

Hi Hind,

Are you trying it on Mobile or Web?

Is the link you pasted not working, meaning that you still seeing the messages inline to the fields?


Shashank...

Hello Shashank,

Its a web version

I am trying to show the validation message at the bottom side but i don't know how to do it 


regsrds

Hind


Hi Hind,

Check the post above yours, Gopal gave a good discription. Is there anything you are still unsure about how to implement?

Gopal Jite wrote:

Hi Hind Ahmed,


You can do this by using validation property of button. 


Set the input textbox to mandatory


Check your input control valid or not and show error message based on that also check form.Valid property



You can get more details about validation in web development course, user this link

https://www.outsystems.com/learn/lesson/857/input-validation/

Hello Gopal, 


I already did all the mentioned steps but it dose not work


i only want the error message to be shown bellow at the page how could i do it 


regards 

Hind Ahmed

Kilian Hekhuis wrote:

Hi Hind,

Check the post above yours, Gopal gave a good discription. Is there anything you are still unsure about how to implement?

Hello Kilian, 


Yah what i want exactly is to show an error message listed at the button page not in the front of each text box,

how can i do this.


Regsrds

Hind Ahmed


Hi Hind,

As i mentioned above, use the below CSS on your page, this will not show the default message.

span.validation-message {   display: none;}

Then use an Expression at the bottom of your page, assign the Error Message to the expression and just refresh the Express widget.

Let me know if you still face issues.


Shashank...

Hi Hind,

If you already try Gopal instruction and it's not work for you. So you can do with any of below approach :

1) Make button to ajax submit because I think you dn't want to reload the page.

2) Create local variable for storing error message in which you store error message on action.

3) Below your button where you want to show error message, keep the label or expression in container and make that container property set to false.

4) Whenever we click on button, set the property of div dynamically and refresh the container. It's helps when you get error set the property of container true and refresh container and vice versa.

Try above steps and still problem not solved then let me know and Hind their is multiple way to do it, it's totally depend on our requirements like CSS.


Regards

Rajat Agrawal

Hi Ahmed,

I implement this at my end,

Follow the process

1. Make all input field as "non mandatory".


2.Button validation method should be "server".


3.Add new expression where you want to show error and add new local variable "ErrorMessage" to store error message.

4.Finally add custom validation on server side.

Make sure you set "escape content" property of expression to no


You will get this final output ;)

Gopal Jite wrote:

Hi Ahmed,

I implement this at my end,

Follow the process

1. Make all input field as "non mandatory".


2.Button validation method should be "server".


3.Add new expression where you want to show error and add new local variable "ErrorMessage" to store error message.

4.Finally add custom validation on server side.

Make sure you set "escape content" property of expression to no


You will get this final output ;)

Hi Gopal,

Good Job..

This is the right way to solve above problem same I posted and you provide screenshot for same.

Regards

Rajat Agrawal


Hi Hind,

Please follow above instruction provided by Gopal. If you do this it will solve your problem.

Regards

Rajat Agrawal

Rajat Agrawal wrote:

Hi Gopal,

Good Job..

This is the right way to solve above problem same I posted and you provide screenshot for same.

Regards

Rajat Agrawal


Thanks Rajat ;)


Here is the example.


Shashank...

Hi All,

Its very easy with screen action but can we implement this with js ?

I think its not good idea to go to server for simple validation.



Hi Gopal,

Yes we can do it same with Js.

Regards

Rajat Agrawal

Hi Gopal,

Keep in mind that with web apps, "going to the server" is the model. You click something, you contact the server for whatever needs to be done, and the server returns the answer. I would strongly advise against using JavaScript, unless you really need it.

Shashank Diwan wrote:

Here is the example.


Shashank...

Dear Shashank,

Thank you very much for your help now its working fine   

regards 

regards

Gopal Jite wrote:

Hi Ahmed,

I implement this at my end,

Follow the process

1. Make all input field as "non mandatory".


2.Button validation method should be "server".


3.Add new expression where you want to show error and add new local variable "ErrorMessage" to store error message.

4.Finally add custom validation on server side.

Make sure you set "escape content" property of expression to no


You will get this final output ;)

Hi Gopal,

Thank you very much for helping me i appreciate your corporate, its working now 

best regards

Hind Ahmed

Awesome, thanks for the feedback Hind.


Shashank...

Hi Hind,

Nice to hear you solve this problem ;)

and Mark valid comment as solution.

 


Cheers,

Gopal 

Kilian Hekhuis wrote:

Hi Gopal,

Keep in mind that with web apps, "going to the server" is the model. You click something, you contact the server for whatever needs to be done, and the server returns the answer. I would strongly advise against using JavaScript, unless you really need it.


Thanks Kilian,

I am new in outsystems, Thanks for your advice :)