Call the div displaying error message only when error occurs

See more:

Javascript

CSS

PHP

In this code I am displaying errors with javascript and in case javascript is disabled php will work, error messages are displayed by div at the bottom so whether error occurs or not, div will always be there, though message is displayed only when there is error. I want that the div should be called only when error occurs because it is causing problems to style error message.

<script type="text/javascript">
$(document).ready(function() {
$('#submit').click(function() {
var title = $('#title').val();
var body = $('#body').val();
if(title.length<5) {
$('#er').html('Error mesg');
return false;
}
if(body.length<500) {
$('#er').html('error msg');
return false;
}
});
});
</script>

<?php
error_reporting('E_ALL ^ E_NOTICE');
if(isset($_POST['submit'])) {

$title=$_POST['title'];
$body=$_POST['body'];

if (strlen($title) < 5) {
 $er = "Title must be of minimum 5 characters";
}
else if (strlen($body) <500 ) {
 $er = "Body must be of minimum 500 characters";
}
else {
  // pdo statement to insert data in db

if ($statement->rowCount() == 1) {
 $er = "Congratulations, successfully posted.";
}
else {
     print_r($db->errorInfo());
  }
 }
} 
?> 

<div id="er"><?php echo $er; ?></div>

I tried replacing div with this code below, but now no error message is displayed seems there is no div.

<?php
if(!empty($er)) {
  echo '<div id="er">'.$er.'</div>';
}
?>