UI Design: changing look of Input field after error

Hi,

thanks for all the good help I received so far! Great community, super team.

I am hanging in the ropes again, this time with an UI Design question.

I have a form, using an Input Field.
grafik

I would like to validate the Input. Right now, I can pop up an Alert Message - that does work;
but I would rather have the field be marked. E. g. with a red background or switching other style properties (e. g. the underline or the fieldname) to a different colour and switch the font to italic.

Is this possible? I fiddled around with the “Set component styles” block, but so far to no avail.

Cheers and thanks a lot,

Hi, yes this is possible. I actually started to write a tutorial about this a little while ago, but haven’t had the time to finish it yet. I’ll let you know when it’s available (hopefully next week).

But in short, it’s about using Formula functions in component’s style properties. You need to enter the Isolation mode to customise those.

If you want to change the color of e.g. input field bottom border based on if the input value given by the user, you should bind the border color to a Formula. Here’s one example Formula:

IS_EMAIL(pageVars.inputValue, "#00FF00", "#FF0000")

This would make the input field’s border color green if the input value was an email and red otherwise.

If you want to change the color only after some interaction by user and not all the time, you should use some true/false type variable (e.g. inputIsValid) instead of the input value directly in the Formula and change its value when you want to do the validation.

Hi,

works like a bomb!

Thank you.
Cheers Tobias