JSFiddle - React, Tailwind, and code Playground

by ttamminen

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<form method="post" action="#" name="sf" id="sf">
    
    <p>
        <label for="name">Name:</label>
        <input type="text" name="name"  id="name"/><br />
    </p>
    
    <p>
        <label for="email">Email:</label>
        <input type="text" name="email"  id="email" /><br />
    </p>
    
    <input type="submit" />
    
</form>

JavaScript

$.validator.addMethod("customname", function(value, element) {
    var i = /^[A-Za-z]+$/;
    return this.optional(element) || (i.test(value) > 0);
}, "Name should only contain characters");

$("#sf").validate({
    rules: {
        name: {
            customname: true
        }
    },
    errorPlacement: function(error, element) {
        element.closest("p").prepend(error);
    }
});