JSFiddle - React, Tailwind, and code Playground

by sanat gupta

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.js"></script>
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.1.4">
<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="hidden" name="email" class="email" />
        <input type="submit" value="submit" name="submit" />
    </form>
</div>
<a id="docs" href="http://docs.jquery.com/Plugins/Validation" target="_blank">Validation Documentation</a>

CSS

#docs {
    display: block;
    position: fixed;
    bottom: 0;
    right: 0;
}

JavaScript

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