As I have dug more and more into tricks with the css style options in Perspective, I discovered the 'valid' and 'invalid' element states. I set the background color to a light red or green according to the corresponding state.
I want to apply this style to a text field component which validates user input utilizing the change script on the text property. If the script determines the input is valid, I would like to set the element state to 'valid' and set the background color accordingly. However, I can't find a way to hook into a way to 'set' an element state. Is this possible? I know I can just make a different style and set the component style based on the result, but it would simplify our stylings to embed this in a single place. Thanks.
I believe those element states are for input elements only, such as text or numeric fields. Same with the enabled/disabled states. Need to put on my reading glasses
I am using a text field component with this style. Is there a built-in way to access this?
Whoops, missed that when I read. I'm currently only seeing the enabled/disabled functionality exposed for the text field. Looks like it might work on a numeric field when setting the allowed range, though it also has a separate invalid style definition in the props.
Looks like you'll need to create separate styles for the 'valid' and 'invalid' state and bind the text field style class to switch between those or a neutral/normal state.
valid and invalid are 'pseudo-classes' defined by CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid
As far as I know, there's no way to use them with any Perspective components.
Valid and invalid state customization will likely become a lot more relevant with the Form Component in Ignition 8.3.
2 Likes
