JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/additional-methods.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<form role="form" id="enrollform">
    <div class="form-group">
        <label for="fname_name">FirstName:</label>
        <input type="text" class="form-control" id="fname_name" name="fname_name">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

JavaScript

$(function () {
       $("#enrollform").validate({
           rules: {
               fname_name: {
                   required: true,
                   lettersonly: true,
                   minlength: 2,
                   maxlength: 25
               }
           },
           messages: {
               fname_name: {
                   required: "Please Enter First Name",
                   lettersonly: "Please Enter Only Letters"
               }
           }
           });

       });