Input restriction or validation with CSS

Question

Is there a way to do input validation (either in terms of offering a warning or, even better, simply blocking the characters) in an HTML text box using only CSS—no JavaScript? I want to do this because:

Some input validation ought to happen on client side
JavaScript can be disabled (I myself run NoScript)
I always consider it a matter of civility to do things in CSS before JavaScript if possible

I'm thinking especially of CSS3 because of its impressive capabilities.

CSS is not meant for this kind of stuff. In fact you should never, ever touch any user input with CSS. You can make input controls and validation controls look flashy, but that's about it. CSS makes things look flashy, not change how things work. Remember that the second S stands for Style. — BoltClock
– BoltClock, Commented Nov 25, 2011 at 3:26
@BoltClock You point stands, perhaps, for prevention. But what about styling the control to reflect bad input, such as turning it red? CSS3 has support for events; if it is not outside of the intension of CSS to turn an element a different color on hover, it does not seem inconceivable that it could be used to change the style of the control on bad input. — Keith Pinson
– Keith Pinson, Commented Nov 25, 2011 at 3:54
Yes, that's absolutely fine. The answers below will do great assuming you're able to use HTML5. — BoltClock
– BoltClock, Commented Nov 25, 2011 at 3:56

Petah · Accepted Answer · 2011-11-25 03:24:32Z

4

You can do it somewhat with HTML5's new input types

See: http://www.456bereastreet.com/archive/201004/html5_input_types/

answered Nov 25, 2011 at 3:24

Petah

46.2k30 gold badges161 silver badges216 bronze badges

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

Comments

Paul · Accepted Answer · 2011-11-25 03:24:31Z

3

Using HTML5, kind of yes. Link: http://thereforei.am/2011/07/01/css-selectors-for-html5-input-validation/

answered Nov 25, 2011 at 3:24

Paul

2,20621 silver badges26 bronze badges

1 Comment

BoltClock Over a year ago

Note that CSS isn't actually involved with validating the input, all it does is change how those prompts look. It's HTML5 that's doing most of the heavy-lifting on the client side.

PonyTricks · Accepted Answer · 2011-11-25 18:21:06Z

1

As others writes: Yes, with HTML5. BUT HTML5 is NOT fully supported by most browsers. So don't use this approach yet.

You can't do it with CSS, you have to use JavaScript until HTML5 is fully supported. But ALWAYS remember to validate server-side as well via ASP(.NET), PHP and such.. Doing both Client-side and Server-side will ensure the safety of your site even if JS are disabled :)

edited Nov 25, 2011 at 18:21

answered Nov 25, 2011 at 18:06

PonyTricks

1,7788 gold badges34 silver badges59 bronze badges

Collectives™ on Stack Overflow

Input restriction or validation with CSS

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related