JSFiddle - React, Tailwind, and code Playground

by atach

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<a id="test" href="#inline">Test</a>

<div style="display:none" id="inline">
    <form class="myform">
        <input type="text" name="email" class="email" />
        <input type="submit" value="submit" name="submit" />
    </form>
</div>

JavaScript

$(document).ready(function () {
    
    $('#test').fancybox({
        beforeShow: function() {
            $('.myform').validate({
                rules: {
                    email: {  // "email" is name of the field
                        required: true,
                        email: true // "email" is name of the rule
                    }
                }
            });
        }
    });
    
});