JSFiddle - React, Tailwind, and code Playground

by Mick Harner

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input id="comment" name="comment" value="( a">
<i> press tab to trigger validation</i><br>
<input id="commentError" value="Comment Limit: 25. Use only letters, numbers, and  punctuation.">

<!-- I have added "?" to your regex pattern because it seems permissible. -->
<!-- Invalid values: "(a", "( a", "12345678901234567890123456" -->
<!-- Valid values: "", "Hello World", "l0ts, "of go.od' st_uff!?" -->

<!-- Additional advice: if you are storing the input value in a database table, you should limit the field length to what the table column can hold.  If, per se, you are saving as VARCHAR(255), then set the #comment field limit as 255 so that the value isn't truncated during saving. -->

CSS

#comment{
    width:200px;
}
#commentError{
    display:none;
    width:400px;
}

JavaScript

$(document).on('blur','#comment',function(){
     // no variable declaration needed
     if(/^[\w .,!"'?]{0,25}$/.test($(this).val())){  // contains only valid chars
         $("#commentError").hide();
     }else{
         $("#comment").focus();  // disallows focus on any other field
         $("#commentError").show();
     }
});