<html>
<head>
<script>
    
  function validateThis(e){
     if (document.getElementById("fullname").value == ''){
         document.getElementById("fullname").focus();
        document.getElementById("fullname").nextElementSibling.innerHTML = 'Please fill out your fullname'
     }
  }   
    
function showComment(){ 
    numchars = document.getElementById("comments").value.length;    
    numleft = 255-numchars;
    document.getElementById("numleft").innerText =  numleft;
    /*if (numleft < 1){ Not user friendly
        document.getElementById("comments").disabled = true; 
    }*/
    if (numleft < 0){ 
        document.getElementById("comments").value =  document.getElementById("comments").value.substring(0,254); 
    }
}    
    
</script>    
    
    
</head>
<body>

<form action="" method="post">    
<input type="text" name="fullname" id="fullname" required onblur="validateThis(event);" placeholder="fullname"><span class="err"></span><br>
<div id ="showcomment" >You have <span id="numleft"></span> characters of your 255 left!</div>        
<textarea id="comments" onkeyup="showComment()" maxlength="255"></textarea>   
<input type="submit" name="submit" value="Enter"> 
    </form>
</body>    
</html>    


