jquery name validation using plugin
<p>I am trying to validate the first name of a user such that it should accept only characters. I also want to assign a maximum length validation, and the first name should not be empty.</p>

<p>But I could get validation only for characters. Now I want to set max length for the first name and name should not be empty also when validation fails  it should change the border color of the input box to red and give an error message.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
  jQuery.validator.addMethod("lettersonly", function(value, element) {
     return this.optional(element) || /^[a-z\s]+$/i.test(value);
  });

  $('#myForm').validate({
    rules: {
        firstName: {
            lettersonly: true

        }
    },
    messages:{
        firstName: {
            lettersonly: "please enter characters only",
        }
    }
  });
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.error{
   color:red;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"&gt;&lt;/script&gt;
&lt;script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/additional-methods.js"&gt;&lt;/script&gt;


 &lt;form id="myForm"&gt;
   &lt;label for="firstname" id="label1"&gt;firstName:&lt;/label&gt;
   &lt;input type="text"id="firstName" name="firstName"&gt;&lt;br&gt;&lt;br&gt;
&lt;/form&gt;</code></pre>
</div>
</div>
</p>