JSFiddle - React, Tailwind, and code Playground

by fiddleyetu

HTML

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<form id="myform" method="post">
    <select name="customer">
        <option value="">Select One</option>
        <option>One</option>
        <option>Two</option>
        <option>Three</option>
    </select>
    <button>Submit</button>
</form>

JavaScript

$(function() {
        $("#myform").validate({
            rules: {
                "customer": {
                    required: true,
                    remote: {
                        url: "/validation/check",
                        type: "post",
                        data: {
                            columnVal: function () {
                                return $("#customer_customer_personal_details_id").val();
                            }
                        }
                    }
                }
            },
            messages: {
                "customer": {
                    required: "Please Select Account Holder", 
                    remote: "One active account already exists. Duplicate accounts are not allowed."}
            }
        });
        $('select').on('change', function() {
            $(this).trigger('focusout');
        })
        .on('focusout',function(e) {
            e.preventDefault();
        });
    });