JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
    <form class="testForm" action="" method="post">
        <input type="text" name="input1" class="NameField" />
        <input type="text" name="input2" class="NameField" />
        <input type="text" name="input3" class="NameField" />
        <input type="text" name="input4" class="NameField" />
        <input type="submit" />
    </form>

CSS

input {
        display: block;
        margin: 10px 0;
    }

JavaScript

$.validator.addMethod("uniqueName", function(value, element) {
        var parentForm = $(element).closest('form');
        if ($(parentForm.find('.NameField[value=' + value + ']')).size() > 1) {
            return false;
        }
        else {
            return true;
        }
    }, "Name exists already");
    
    $.validator.addClassRules({
        NameField: {
            required: true,
            minlength: 2,
            uniqueName: true
        }
    });
    
    $(".testForm").validate();