Custom validation message for input type="Number" when min attribute is set

Salini p

Solved

Question

Hi EveryOne,

I am using an input with type set to number. In extended properties I have set the min attribute to "1". Now the control is displaying positive numbers starting from 1. But user can enter manually some text into the input.
The input control is inside EditRecord control.

My Problem is when user enters any negative number or zero and clicks submit button then it is displaying the error message as "Integer expected" instead of "Value should be greater than 0".

How to customise that message. Please help me
For reference adding image here

Thanks in Advance.

10 Mar 2016

Paulo Ribeiro

Solution

Hello Salini and Suraj,

I'm afraid I didn't understand your exact issue initially. Now that I read all the messages in the thread more carefully I was able to make a couple tests on my own and I reached the same situation as you:

In this test, with the property min = 1 set on the inputs, you can see a built-in message "Please select a value that is no less than 1". This message appears as a balloon if the input is inside the Edit Record widget, but appears as a tooltip if it is outside. And it seems that the validation occurs before the logic of the action associated with the button Ok. That is the explanation I can think of why the default message "Integer expected!" also appears, but I think it can be considered a bug.

If I remove the property min = 1 from the inputs, this is the result:

This time, I cannot make a validation on the input outside the Edit Record widget. But for the input inside the Edit Record I was able to define my custom message "IntegerAttribute must be >= 1".

Perhaps you can simply drop the property min = 1, allowing the user to enter something like "0" or "-10" but immediately providing the user feedback about the expected input?

I also attach my small test module in case you want to see it.

See solution in context

Test.oml

14 Mar 2016

Suraj Borade

Hi Salini,

You can run javascript code to check what is the number entered in text box.

or at the start of submit action, check what is the value of text in text box. Give one if condition and check whether number is less than 0 and on true branch give feedback message "Value should be greater than 0".

Hope this helps.

-- Suraj B

10 Mar 2016

1 reply

10 Mar 2016

Show thread

Hide thread

Salini p

Hi Suraj,

Thank you for the reply.
Now i have edited my post with clear images.

Actually when i click the ok button, the html5 validations are coming which is enough for my requirement. I have also done the server side validation.

My requirement is the min digit entered should be 1.
1) If user enters any digit below that then i should display "Value should be greater than or equal to 1" message.
2) If user enters text not number then should display "Integer expected" message.

When I click on ok button the controls border will turn red and we hover the mouse on the controls then proper messages are displayed. This is the case when input control is outside EditRecord/Form.

But when the input control is inside edit record/Form then in both 1 and 2 cases it is displaying "Integer Expected" message only(not on hover).

I tried to insert some javascript in onclick of button. but after my script Outsystems script is running and same message is displaying.

10 Mar 2016

Suraj Borade

Hi Salini,

Please share sample oml file.

10 Mar 2016

Salini p

Hi Suraj,

I am sharing my sample oml, Please go through it and if you need any more explanation then please ask me, i will try to ask my requirement in a clear way thanks.

The thing here is , if i place the input inside edit record then on mouse hover i am getting the required validation, but below the textbox its saying integer expected.

Thanks

MainModule.oml

10 Mar 2016

Suraj Borade

Hi Salini,

I have added Javascript code on WebScreen1. This Javascript code will not allow any characters to be entered into it and it will also not allow negative number. (If you want to accept integers as well just change input parametrs at the time of calling Javascript).

I observed that when we click on Ok button and value in the text box is "0", it gives an error "integer expected".

On property window of button, I set "Validation" property to "Server" (earlier it was "Client and Server") and now I am not seeing an error.

We may need to ask support team why this is happening when it was Client and Server but for now it is working.

(Note : I have tested this oml for OnClick property of button and not for mouse hover)

Regards,
Suraj Borade

MainModule_Modified.oml

10 Mar 2016

1 reply

11 Mar 2016

Show thread

Hide thread

Salini p

Hi Suraj,

Thanks alot for your valuable time. Appreciating your efforts.

In my scenario I need the validation property as "client and server", because i am having some more fields in edit record for which i am using mandatory validations.

But the CheckNumber function is great, that is fine for my case, but need little modifications.
I dont want to allow user to type 0 in the first position.
So I wrote the below javascript

function dontAllowZero(e, thisObj)
{
    if(thisObj.value.charAt(0) === '0')
        thisObj.value = "";
}

and i called this function in onKeyUp event. Now when user types zero then initially it displays and in 1 sec it is cleared. Is it possible to avoid it in onkeypress event?
I tried but getting thisObj value as before value.
i.e
if my text box contains value "123" and i selected entire value and typed "0" then in onKeyPress event i am getting thisObj.value as "123" which is obvoius, but is it possible to get value as "0" using any other property?

Thanks once again.

11 Mar 2016

Suraj Borade

Hi Salini,

If I understand your problem correctly, you don't want "0" at all? I am asking since I din't get last part of your reply.

If you don't want "0", I think we can customize existing javascript. We need to do something with key value of "0" in javascript.

Let me know if this is your requirement and I will try to modify javascript one more time.

-- Suraj B

11 Mar 2016

1 reply

11 Mar 2016

Show thread

Hide thread

Salini p

Hi Suraj,

I dont want to allow the value "0" as input to database.
But i want to allow key 0 to be pressed i.e, inputs 10, 20 , 1000 these are valid but only "0" is not valid.

11 Mar 2016

Suraj Borade

Hi Salini,

To summarize, before inserting into database you want to avoid "0" and you don't want to enter single "0" in textbox as well.

Well, I will need to do some research but before inserting into database you can try attached logic on submit button.

Hope this helps.

temp1.png

11 Mar 2016

1 reply

11 Mar 2016

Show thread

Hide thread

Salini p

Thanks Suraj,

Server side this will work , thanks. I am mainly looking for the client side solution, Please tell me if you find any solution other than that onkeyup thing what i posted earlier. Thanks you for your support.

11 Mar 2016

Paulo Ribeiro

Hello Salini,

There's an easier and more direct way of doing this validation, that I think matches exactly what you need. Please see the following two videos from the online training:

In the button that you're using to submit the inputs of the form, you need to change the property Validation to "Client & Server".

Then, in the action associated with the button, you can check the value that the user entered in the input, perform your validations, and if the value is invalid you assign <Input>.Valid = True and <Input>.Message = <Your custom message>.

Finally, at the end of all your validations, you just need to check if <Form>.Valid is True or False. If it is False, you end your action there (meaning that the application does not advance to another screen). Your custom message is displayed next to the invalid input.

13 Mar 2016

1 reply

14 Mar 2016

Show thread

Hide thread

Salini p

Thanks Paulo,

I have gone through the videos. I am aware of the server side validation. I also kept the validation property of button to "Client and server". As shown in the video we can achieve the functionality.

As the input type = number is rendered as html5 number type input and if we use the min attribute then the control itself will validate according to our min and max attributes specification on client side.

So as we are using "client and server", I am trying to display an appropriate message to the user on client side validation itself.

But when i specify min attribute to 1 and i enter 0 then on client side validation it is giving "Integer Expected" message.

14 Mar 2016

Suraj Borade

Hi Paulo,

Thanks for the inputs. But we are still not getting why "Integer Expected" error is coming?

Can you please look at the oml one more time?

Thanks,
Suraj B

14 Mar 2016

Paulo Ribeiro

Solution

Test.oml

14 Mar 2016

Canasta Muisca

click in the app

11 Aug 2020

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

See the full guidelines