JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>

<script type="text/javascript">

</script>

<form method="post" id="myForm">
    
    Name regex (alphanumeric):<input type="text" name="name" />  
    <input type="submit" value="Go" />  
</form>

JavaScript

$(function() {

    $.validator.addMethod("nameRegex", function(value, element) {
        return this.optional(element) || /^[a-z0-9\-]+$/i.test(value);
    }, "Username must contain only letters, numbers, or dashes.");

    $("#myForm").validate({
        rules: {
            "name": {
                required: true,
                nameRegex: true,
                minlength: 8
                
            }
        },
        messages: {
            "name": {
                required: "You must enter a login name",
                nameRegex: "Contain only letters, numbers."
            }
        }
    });

});