title: How to hide `div` carrying error message when there is no error?
body: <p>Below is a server side and client side validation form. Here I am using <code>div id=er&gt;</code> for showing error messages on failing to comply with requirements. Now the <code>div</code> <code>er</code> will be always there causing me styling problems. I want error <code>div</code> to appear only when there is error and not otherwise.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function() {
      $('#submit').click(function() {
              var firstname = document.getElementById('fn').value;
              var lastname = document.getElementById('ln').value;
              var password = document.getElementById('pswd').value;
       if (firstname.length &lt; 2 || firstname.length &gt; 11) {
       $('#er').html('First name must be between 1 to 11 characters long');
       return false;
       }
       else if (lastname.length &lt; 2 || lastname.length &gt; 11) {
       $('#er').html('Last name must be between 1 to 11 characters long');
       return false;
       }
       else if (password == "") {
       $('#er').html('Fill your password');
       return false;
       }
       });
       });
  &lt;/script&gt;
  
  &lt;?php
  error_reporting('E_ALL ^ E_NOTICE');
  if(isset($_POST['reg'])){
  $fn = ucfirst($_POST['fname']);
  $ln = ucfirst($_POST['lname']);
  $pswd = $_POST['password'];
  
  if( strlen($fn) &lt; 2 || strlen($fn) &gt; 11 ) {
    $er = 'First name should be 2 to 11 characters long';
  }
  elseif( strlen($ln) &lt; 2 || strlen($ln) &gt; 11 ) {
    $er = 'Last name should be 2 to 11 characters long';
  }
  elseif( $pswd == "" ) {
    $er = 'Enter your password';
  }
  else{
  $pswd = password_hash($pswd, PASSWORD_DEFAULT);
  $stmt = $db-&gt;prepare("INSERT INTO users (first_name,last_name,password) VALUES (:first_name,:last_name,:password)");  
  $stmt-&gt;execute( array(':first_name'=&gt;$fn,':last_name'=&gt;$ln,':password'=&gt;$pswd));
  } 
  
  &lt;form action="register.php" method="post" class="register"&gt;
      &lt;input type="text" name="fname" id="fn" placeholder="First Name"/&gt;
      &lt;input type="text" name="lname" id="ln" placeholder="Last Name"/&gt;
      &lt;input type="password" name="password" id="pswd" placeholder="Password"/&gt;
      &lt;input type="submit" id="submit" name="reg" value="Create"&gt;
   &lt;div id='er'&gt;&lt;?php echo $er; ?&gt;&lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Tried something like this</p>
  
  <pre><code>&lt;?php
   if ($er!=""){
   echo "&lt;div class='er'&gt;".er."&lt;/div&gt;";
   }
   ?&gt;
  </code></pre>
  
  <p>But this did not work may be because javascript too shows error through same <code>div</code> so how to hide error <code>div</code> when their is no error.</p>