CodePen

HTML

            
              <form method="#">
    <input type="text" class="textbox" />
    <input type="text" class="textbox" />
    <input type="text" class="textbox" />
    <input type="text" class="textbox" />
    <input type="text" class="textbox" />
    <button type="submit" value="submit">submit</button>
</form>
            
          
!

CSS

            
              input[type=text] {
    display:block;
    float:left;
    height:30px;
    width:190px;
    clear:both;
    margin:8px 0 0 15px;
    outline:0;
    border:1px solid #666;
    box-shadow:inset 0 0 2px #ccc;
}
button {
    margin:7px 0 0 20px;
    padding:4px 8px;
    font:15pt 'Georgia';
}

.warning {
    background:rgba(255,0,0,.2);
    border:2px dotted #F50C43 !important;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              /**

Heads up, this code is not written to the best ability, merely a simple quick demo for {{{ http://css-tricks.com/forums/discussion/22441/jquery-validation#Item_2 }}}

I really suggest using jQuery's validation plugin, don't try to reinvent the wheel.

jQuery plugin: http://bassistance.de/jquery-plugins/jquery-plugin-validation/

**/


// Opposite of focus()
$(':input').blur(function() {
    // If there is no value
    if(!$.trim(this.value).length) {
        // Add the warning class
        $(this).addClass('warning');
    } else {
        // Otherwise remove the warning class
        $(this).removeClass('warning');
    }
});

// When the form is tested for submission
$('form').on('submit', function(e) {
    // Run through all the input elements
    $(':input').each(function() {
        // If the value is an empty string
        if ( $(this).val() === "" ) {
            // Add the warning class
            $(this).addClass('warning');
            // Prevent the form from submitting, can use return false as well
            e.preventDefault();
        } else {
            // Otherwise everything is G2G (Good 2 Go)
            return true;
        }
        // If the input element already has the warning class
        if ( $(':input').hasClass('warning') ) {
            // Stop form submission
            e.preventDefault();
        } else {
            // G2G
            return true;
        }
    });
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................