Search Box Validation

HTML

<form method="get" action="http://www.graphicproducts.com/search.php" id="search-form">
    <input type="text" name="q" class="search" placeholder="Search Site..." onfocus="this.placeholder = ''" onblur="this.placeholder = 'Search Site...'">
    <button type="submit" class="search-button">Search</button>
</form>

CSS

input[type="text"]::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #e4e4e4 !important;
}
input[type="text"]:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #e4e4e4 !important;
}
input[type="text"]::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #e4e4e4 !important;
}
input[type="text"]:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #e4e4e4 !important;
}
input:required {
    box-shadow: none!important;
    border-color: #ccc !important;
    color:#666768 !important;
    outline: none;
}
input:required:focus {
    box-shadow: none!important;
}
.bubble {
    position: relative;
    top:25px;
    width: 250px;
    height: 35px;
    padding: 10px;
    background: #FFFFFF;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: #7F7F7F solid 1px;
    z-index: 0;
     font-family:Arial, Helvetica, sans-serif;
}
.bubble:after {
    content:'';
    position: fixed;
    border-style: solid;
    border-width: 0 15px 15px;
    border-color: #FFFFFF transparent;
    display: block;
    width: 0;
    z-index: 2;
    top: -15px;
    left: 39px;
}
.bubble:before {
    content:'';
    position: absolute;
    border-style: solid;
    border-width: 0 15px 15px;
    border-color: #7F7F7F transparent;
    display: block;
    width: 0;
    z-index: 0;
    top: -16px;
    left: 39px;
}
.exclaimationMark{
    width:15px;
    background-color:#faab20;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:bold;
    display:inline-block;
    color:#FFF;
    text-align:center;
    margin-right:10px;
}

JavaScript

$("#search-form").submit(function () {
    var isFormValid = true;
    $('.bubble').remove();
    
        if ($.trim($(this).val()).length === 0) {
            $(this).addClass("highlight");
            isFormValid = false;
        } else {
            $(this).removeClass("highlight");
            isFormValid = true;
        }
   
    if (!isFormValid) {
        $('#search-form').after("<span class='bubble'><span class='exclaimationMark'>!</span>Please enter a search term.</span>");
    }
    return isFormValid;
});

$('html').click(function () {
    $('.bubble').remove();
});