# Utilizing the Valid and Invalid Element States

**URL:** <https://forum.inductiveautomation.com/t/utilizing-the-valid-and-invalid-element-states/87216>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [March 12, 2024, 7:51pm UTC](https://forum.inductiveautomation.com/t/utilizing-the-valid-and-invalid-element-states/87216 "2024-03-12T19:51:13Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![alex.chmelka](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/alex.chmelka/32/26672_2.png) [@alex.chmelka](https://forum.inductiveautomation.com/u/alex.chmelka)\
**Post date:** [March 12, 2024, 7:51pm UTC](https://forum.inductiveautomation.com/t/utilizing-the-valid-and-invalid-element-states/87216/1 "2024-03-12T19:51:13Z")

</div>

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.

 ![Screenshot 2024-03-12 144112](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/0/405ec9fb422498b0c323901be576936958a458b5.jpeg)

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.

---

<div class="post-metadata">

**Author:** ![ryan.white](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan.white/32/73193_2.png) [@ryan.white](https://forum.inductiveautomation.com/u/ryan.white)\
**Post date:** [March 12, 2024, 9:41pm UTC](https://forum.inductiveautomation.com/t/utilizing-the-valid-and-invalid-element-states/87216/2 "2024-03-12T21:41:55Z")

</div>

~~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

---

<div class="post-metadata">

**Author:** ![alex.chmelka](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/alex.chmelka/32/26672_2.png) [@alex.chmelka](https://forum.inductiveautomation.com/u/alex.chmelka)\
**Post date:** [March 12, 2024, 9:44pm UTC](https://forum.inductiveautomation.com/t/utilizing-the-valid-and-invalid-element-states/87216/3 "2024-03-12T21:44:44Z")

</div>

I am using a text field component with this style. Is there a built-in way to access this?

---

<div class="post-metadata">

**Author:** ![ryan.white](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan.white/32/73193_2.png) [@ryan.white](https://forum.inductiveautomation.com/u/ryan.white)\
**Post date:** [March 12, 2024, 9:47pm UTC](https://forum.inductiveautomation.com/t/utilizing-the-valid-and-invalid-element-states/87216/4 "2024-03-12T21:47:45Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [March 12, 2024, 9:59pm UTC](https://forum.inductiveautomation.com/t/utilizing-the-valid-and-invalid-element-states/87216/5 "2024-03-12T21:59:15Z")

</div>

`valid` and `invalid` are 'pseudo-classes' defined by CSS: [https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid](https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid)

As far as I know, there's \[1\] no way to use them with any \[2\] Perspective components.

Valid and invalid state customization will likely become a lot more relevant with the Form Component in Ignition 8.3.

* * *

1. currently 

2. first-party