Read only text input box "required" not working, how to make it work?

Ask us anything How do I?
1

Hi friends! I have a country code text input that I have created. As you can see from the screenshot it’s in a container, followed by the text input, followed by a search and options.

I have set “required” as true for the text input, but when i don’t fill it up, i am still allowed to proceed.

image
image1380×398 51.6 KB

image

After tinkering around, I realize it’s because I have also set the text input as “read only”. I need it to be “read only” because I want users to select from the country code dropdown, not come up with their own values.

But I also want it to be “required”, which does not work when read only is set to true for the text input. How do I make this happen?

2

Hi @raelyn

A simple way to do it is to make an extra input element, make it required, position absolute behind your Country Code input, change its value on the country code dropdown ‘on change’.
This way if nothing is selected it will give the error like it is on the main Country Code input box

Or, if you’re able to change the Country Code input box into a select Element, you can set it to required and not need to have ‘read only’ on it.