CODEWITHSUNDEEP
javascriptjquerycssformsinput
Optimus Prime
Optimus Prime

Reputation: 308

How to make CSS warning if empty <input> (preferably without JS)

I have an <input> text field in a form. If I click in the text input field and leave it blank when it loses focus then background-color will be changed for the <input>.

I want to use only CSS, not JS or jQuery. Please help me.

If it is not possible only by using CSS then how can I implement it using JS or jQuery?

Upvotes: 2

Views: 4061

Answers (4)

Winder
Winder

Reputation: 101

Yes,you can use only CSS, not JS or jQuery to achieve the results,for example:

HTML:

<input placeholder="name" type="text" />
<input placeholder=" " type="text" />

CSS:

::-webkit-input-placeholder {
    color: #fff;
    background: red;
}
:-moz-placeholder { /* Firefox 18- */
    color: #fff;
    background: red;
}
::-moz-placeholder {  /* Firefox 19+ */
    color: #fff;
    background: red;
}
:-ms-input-placeholder {  
    color: #fff;
    background: red; 
}

The precondition is that you need a placeholder attribute and it's not none. See this exmaple from this JSFiddle.

You can read this passage Style Placeholder Text about this css property to know more.

Upvotes: 2

Anthony
Anthony

Reputation: 37065

The closest pure-CSS approach requires the browser to support the :required pseudo-class. Your input would have the required attribute like so:

<input id="test1" name="test1" type="text" required />

And your CSS would look like:

input:required {
    background-color: red;
}

Here is an example jsfiddle:

http://jsfiddle.net/5L5hx4bo/

However, this would set the style for the input on page load, not when the field lost focus, but this makes more sense, from a CSS/document perspective. For a field to change style based on state, it would be one of three 'states':

invalid :

Which could be handled similar to above but using 

input:invalid {
    background-color: red;
}

But a blank text input would not be considered "invalid" and thus would never get styled by such a rule. However, an input with a type like "email" that had a value set to "bogus#value" would get styled, since the value is not considered valid for that type.

required:

The blank text input would be considered a match if required attribute is set, however this would be a match when the form initially loads as well.

focus (negative rule) :

You could have a CSS rule for when the input does not have the state of being in focus, but this is not the same as "on blur". Similar to required, the rule would be applied when the element loads, not exclusively when focus is lost.

Since your requirements for the style are :

  • When an input's state changes from in-focus to not-in-focus
  • When an input is type text and value is empty
  • When an input was most recent element with state of in-focus changing to not-in-focus (so style rule is removed from an input once another input loses focus and has style rule applied)

This would not be something that would be considered a "pure CSS" type state, and thus should be handled via javascript.

Upvotes: 1

Jonathan Lam
Jonathan Lam

Reputation: 17361

This would not be possible solely with CSS. JS / jQuery are required to do DOM manipulation and scripting in general.

For example, if you had this:

<input type="text" id="input" />

You can use jQuery to check for change and change background color onblur.

var initalValue;
$("#input").focusin(function() {
    initialValue = $(this).val();
});
$("#input").focusout(function() {
    if($(this).val() != initialValue) {
        $(this).css("background-color", "red");
    } else {
        $(this).css("background-color", "white");
    }
});

This will get its initial value and compare it with its value after losing focus. If it is different, the background color of the input will turn red.

See this JSFiddle.

EDIT Upon reading your question again I noticed I read it wrong. My answer made the background red if there was any change, but you want background red if the <input> is blank. You can do this with:

$("#input").focusout(function() {
    $(this).css("background-color", ($(this).val() == "") ? "red" : "white");
});

See the updated JSFiddle.

Upvotes: 0

Hasib Tarafder
Hasib Tarafder

Reputation: 5813

You can do that using JS / jQuery like:

HTML 

<input id="name" placeholder="name" type="text" />

jQuery

$('#name').on('blur', function(){
        if(!$(this).val().trim()){
            $(this).css({
                'background-color': 'red'
            })
        }else{
            $(this).css({
                'background-color': 'white'
            })
        }
    })

Please have a look in the following link: JSFIDDLE

Upvotes: 1

Related Questions