JSFiddle - React, Tailwind, and code Playground

by mysteryh

HTML

<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.8/jquery.validate.min.js"></script>
<form id="myform">
    <table>
        <tr>
            <td><input name="currency1" unique="currency" /></td>
        </tr>
        <tr>
            <td><input name="currency2" value="a" class="required" unique="currency" /></td>
        </tr>
        <tr>
            <td><input name="currency3" value="a" class="required" unique="currency" /></td>
        </tr>
        <tr>
            <td><input name="currency4" value="a" class="required" /></td>
        </tr>
    </table>
</form>
<button id="validate">Validate</button>

CSS

label.error { color: red }

JavaScript

jQuery.validator.addMethod("unique", function(value, element, params) {
    var prefix = params;
    var selector = jQuery.validator.format("[name!='{0}'][name^='{1}'][unique='{1}']", element.name, prefix);
    var matches = new Array();
    $(selector).each(function(index, item) {
        if (value == $(item).val()) {
            matches.push(item);
        }
    });

    return matches.length == 0;
}, "Value is not unique.");

jQuery.validator.classRuleSettings.unique = {
    unique: true
};
$("#myform").validate();

$("#validate").click(function() {
    $("#myform").valid();
});