{"id":14285,"date":"2011-09-06T20:36:46","date_gmt":"2011-09-07T03:36:46","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14285"},"modified":"2017-11-30T14:41:03","modified_gmt":"2017-11-30T21:41:03","slug":"valid","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/selectors\/v\/valid\/","title":{"rendered":":valid"},"content":{"rendered":"

The :valid<\/code> selector allows you to select <input><\/code> elements that contain valid content, as determined by its type<\/code> attribute. :valid<\/code> is defined in the CSS Selectors Level 3 spec<\/a> as a \u201cvalidity pseudo-selector\u201d, meaning it is used to style interactive elements based on an evaluation of user input.<\/p>\n

This selector has one particular use: providing a user with feedback while they are interacting with a form on the page. The example below uses CSS to turn the \u201cEmail\u201d fields red or green, responding to the whether or not the contents match a valid email address pattern:<\/p>\n

See the Pen :valid & :invalid inputs<\/a> by Chris Coyier (@chriscoyier<\/a>) on CodePen<\/a><\/p>\n

Note how the first <input><\/code> (\u201cEmail\u201d) is green\u2014valid\u2014even when there is no content in the field. This is because the input is optional, so leaving it blank would result in a valid form submission. To fix this behaviour, the second <input><\/code> has a \u201crequired\u201d attribute, which means that a blank field would result in an invalid form submission.<\/p>\n

Points of Interest<\/h3>\n