Using pseudo-classes in React component

Question

In my React component, I have a form with multiple input fields. In the CSS classes that I'm working with, there's an "invalid" pseudo-class that should highlight the field if its value is invalid. Currently, the input fields do not have any classes defined in my component. They're using the default styling that comes from the CSS file.

class MyForm extends Component {

   render() {

      return(

         // There's more code here. Not showing to keep things simple

         <input type="text" name="someProperty" value={myObject.someProperty} onChange={e => this.someFunction(e)} />

      );
   }

}

How do I actually use this -- meaning, how do I set the input field to invalid? I tried simply adding "invalid" to its CSS class but it didn't work.

This is what I tried with no results:

<input type="text" name="someProperty" className={showInvalid} value={myObject.someProperty} onChange={e => this.someFunction(e)} />

UPDATE:

Doing a bit more research on pseudo-classes, they do NOT go into the class. So in HTML, the input field would simply appear as below:

<input name"someProperty" invalid />

className should be a string. I think it probably thinks className is undefined since showInvalid is undefined. — user6731369
– user6731369, Commented Dec 21, 2016 at 21:19
See my update. Looks like it should not go into the className. — Sam
– Sam, Commented Dec 21, 2016 at 21:22
Ah some reason I brain farted... Didn't see the psuedo. My bad — user6731369
– user6731369, Commented Dec 21, 2016 at 21:23
It looks like you can't use pseudo classes in inline style. Which is basically what you are doing. stackoverflow.com/questions/28269669/…. Never had that come up — user6731369
– user6731369, Commented Dec 21, 2016 at 21:25
Unfortunately, I'm coming to that conclusion as well! Bummer! — Sam
– Sam, Commented Dec 21, 2016 at 21:28

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

You could just use the pattern attribute on the input elements.

When an element is invalid

The element matches the :invalid CSS pseudo-class; this will let you apply a specific style to invalid elements. Similarly, valid elements match the :valid pseudo-class....

...All <input> elements can be validated using the pattern attribute. This attribute expects a case sensitive Regular Expression as its value...

var NumberInput = React.createClass({
  render: function() {
    return <input type="number" pattern="[0-9]+([\,|\.][0-9]+)?" step="0.01" title="This should be a number with up to 2 decimal places." placeholder="Price" />;
  }
});

ReactDOM.render(
  <NumberInput />,
  document.getElementById('container')
);

input:invalid {
  background-color: #ff3333;
}

input:valid {
  background-color: transparent;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="container"></div>

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Dec 21, 2016 at 21:43

DavidDomain

15.3k4 gold badges44 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Sam Over a year ago

This is an interesting idea! I'll give it a try and let you know. Thanks!

DavidDomain Over a year ago

Sure, no problem.

Sam Over a year ago

I couldn't get it to work but it should. We simply put a regex into pattern, right? For example if I want to make sure it's a number with two decimal points, I should be able to use pattern="/^[0-9]+(\.[0-9][0-9]?)?$/", correct?

DavidDomain Over a year ago

I've made an update to the fiddle using an input with type set to number, allowing up to two decimal places.

DavidDomain Over a year ago

Sorry, my first pattern was wrong, this should work [0-9]+([\,|\.][0-9]+)?. Check out the code snippet.

|

jmac · Accepted Answer · 2016-12-21 21:19:41Z

0

If I understand correctly, that is what you're looking for

className={`${this.state.showInvalid} ? 'invalidCssClassName' : 'nonInvalidCssClassName'`}

That means you should store somewhere (state or props) the value which will be responsible for evaluating the class name. In that case when showInvalid is evaluated to true, CSS class will be invalidCssClassName otherwise nonInvalidCssClassName

answered Dec 21, 2016 at 21:19

jmac

7064 silver badges15 bronze badges

1 Comment

Sam Over a year ago

See my update. Research shows me that pseudo-classes are not used in class names.

Collectives™ on Stack Overflow

Using pseudo-classes in React component

2 Answers 2

6 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related