Detecting Space in Input Boxes - CSS3 vs jQuery

It's 1 A.M and my half brother Jack from Utah pings me. Hey Ric, I got a webdesign issue that's keeping me awake. I paused for 2 minutes..assuming he is going to tell me more about the issue. But it seemed he was expecting me to solve it, whatever the issue is. So I being the nicest guy, asked him to mail me.

Here's the deal.


Jack wanted to find a space character in an <input> but using CSS3 selectors.Well, if you want to create an actual CSS3 rule in your stylesheet, then input[value*=' ']{..} will work, but only for values in the actual attribute (in the source code) and not the value as modified inside the browser..

For eg:

<form>
    <input type="text" value="no-space-here" /><br/>
    <input type="text" value="" /><br/>
    <input type="text" value="space here" /><br/>
    <input type="text" value="" /><br/>
    <input type="submit" value="submit"> type a space and press Submit
</form>

CSS

input[value*=' ']{
    background-color:#fff5f5;
}
​
Run the code here and see for yourself. http://jsfiddle.net/8BdUV/

A good solution is to use jQuery here

$('form').submit(function(){
    return ($(':input[value*=" "]').addClass('warning').length > 0) ? false : true;
});​

CSS

.warning{
    background-color:#fff5f5;
}

Now run the solution http://jsfiddle.net/PHja9/

Bingo!