Bootstrap 3 + Validation Plugin

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
            <div id="updates" class="container-fluid">
    
                <center>
                <div class="title">

       <br /><span class="signuptitle">Sign up to our daily newsletter.</span>  <br /></div>

  <div class="guestlist">
  
  
<form class="guestlist-form" action="email.php" method="post"> 
    <input name="emailaddress" type="text" title="Enter Email Address" class="guestlistfield" placeholder="Enter your Email" /> 
   <input class="button" title="Join" type="submit" value="Sign up">
   
</form>

</div>

<div class="myerror" style="margin-top:-20px;"></div>


	
	
	
                    
                    </center>
                <br> <br>
  </div>

CSS

.error-class {
    color:red;  z-index:1; font-size:15px; 
}

.guestlist-form.error-class {
    color:red;  z-index:1;
}

.guestlistfield.error-class {
   position:relative; display:inline-block;
}

.guestlist-form .button {
   position:relative; z-index:2;
}



input.error-class { border:3px solid red;}

input.error-class:focus { border:3px solid #f90;}

.valid-class {
    color:black;
}

.emailaddress:focus, textarea:focus {
    border:3px solid #f90;
}



@media (min-width:765px) { 
	.guestlist
	{
		overflow: hidden;
		 width:100%; max-width:730px; margin-top:20px;
		 height:130px; display:inline-block;
	}


	.guestlist .title h2
	{
		color: rgba(0,0,0,0.8);
	}
	
	

}

@media (max-width:764px) { 
	.guestlist
	{
		overflow: hidden;
	 width:100%; min-width:200px;
		 height:120px; padding-bottom:20px; padding-bottom:10px;
		text-align:left;
	}


	.guestlist .title h2
	{
		color: rgba(0,0,0,0.8);
	}
	
	.guestwrap
	{
		text-align:center; width:100%;
	}
}


@media (min-width:765px) { 
	.guestlist2
	{
	overflow: hidden;
		 width:100%; 
		 height:120px; display:inline-block;
	}


	.guestlist2 .title h2
	{
		color: rgba(0,0,0,0.8);
	}
}

@media (max-width:764px) { 
.guestlist2
	{
		overflow: hidden;
	 width:100%; 
		 height:90px; padding-bottom:20px; padding-bottom:10px;   
		text-align:left;
	}



	.guestlist2 .title h2
	{
		color: rgba(0,0,0,0.8);
	}
}


		
				.guestlistfield
			{
				position: relative;
				-webkit-appearance: none;
				border: 0;
				background: #fff;
				background: rgba(255,255,255,0.75);
				width:98%; position:relative;
				border-radius: 0.50em; 
				margin: 1em 0em; display:inline-block;
				padding: 1.50em 1em; padding-right:90px; 
				box-shadow: inset 0 0.1em 0.1em 0 rgba(0,0,0,0.05);
				border: solid 3px rgba(0,0,0,0.15);
				-moz-transition: all 0.35s ease-in-out;
				-webkit-transition: all 0.35s ease-in-out;
				-o-transition: all 0.35s ease-in-out;
				-ms-transition: all 0.35s ease-in-out;
				transition: all 0.35s...

JavaScript

$(".guestlist-form").validate({
    errorClass: "error-class",
    validClass: "valid-class",  
    rules: {
            emailaddress: {
                required: true,
                email: true
            }
    },
  errorPlacement: function(error, element) {
  	//$(".myerror").html('');  // clears previous error messages
    //error.appendTo( ".myerror");
    console.log(error)
    $(".myerror").html(error)
  },
    success: function(label) {
    label.addClass("valid-class").text("Ok!")
  },


    
    
    messages: {
    
    emailaddress: {
                required: "Please enter your full email address."			
            }
    
    }
    
    
    
});