Form validation for input type number doesn't work with readonly attribute

Wappler General Need Help
,
1

Hi,

I have form input fields as type=number with readonly attributes. If I add min or max validations, these validations don't work in the server connect form unless readonly attributes are removed.

The server-side validations also don't trigger with readonly attribute when submited values are outside the min and max values.

Is it an expected behaviour? If it is, then how can I validate min or max values in the UI for input fields with readonly attribute?

Any help is greatly appreciated.

2

Readonly inputs are not validated, this is by design:

If the readonly attribute is specified on an input element, because the user can not edit the input, the element does not participate in constraint validation.

3

Maybe you need the disabled attribute?
You can then change the style on css to avoid the grey background

4

Disabled inputs are not being sent on form submit.

1 Like
5

Thanks Teodor, I will re-work on the logic of updating calculated input values.

1 Like
6

@Teodor sorry, too early here, we need a sorry reaction haha

@guptast what about a hidden input linked to that? I'm pretty sure the validation message can be placed somewhere else (I'm sure I have done that before)

7

Hi Franse,

I am showing user a calculated value based on the input values in other fields. I need to add readonly attribute to the calculated field so that users can't change it's value before submitting the form.

8

Yes, I'm saying to apply the validation on the hidden input (the dynamic attribute value of the hidden input is the read only one)
So you're applying the validation there.

The only issue is that the validation message error can be also hidden, which means you need to make a workaround to show it

9

I would also suggest you do the calculation server-side to stop any dodgy manipulation.