JSFiddle - React, Tailwind, and code Playground

by Maulik Anand

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/additional-methods.js"></script>
<script src="//cdn.jsdelivr.net/jquery.velocity/0.0.23/jquery.velocity.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/0.0.22/velocity.ui.js"></script>
<a id="btn">Click</a>

<div class="mainDiv"></div>
<form id="sample">
    <input type="text" name="first" id="first" required>
    <br>
    <input type="text" name="second" id="second" required>
    <br>
    <input type="text" name="third" id="third" required>
    <br>
    <input type="submit" value="submit">
</form>

CSS

.mainDiv {
    width:200px;
    height:200px;
    background-color:#1abc9c;
    border-radius:50%;
    display:none;
}

JavaScript

$("#btn").click(function () {
    // alert("clicked");
    $(".mainDiv").velocity("transition.flipBounceXIn", {
        stagger: 75,
        duration: 2000
    });
});

$("#sample").validate({

    errorPlacement: function (error, element) {
        console.log("errorPlacement");
        console.log(error.outerHTML);
        console.log(element.outerHTML);
        error.css("display", "none").insertAfter(element).velocity("transition.flipBounceXIn", {
            stagger: 75,
            duration: 2000
        });
    },
    highlight: function (element, errorClass, validClass) {
        console.log("highlight Fired");
        console.log(element.outerHTML);
        $(element).velocity("transition.bounceIn", {
            stagger: 75,
            duration: 2000
        });
    },
    success: function (element) {
        console.log("success Fired");
        console.log(element.outerHTML);
        $(element).velocity("transition.perspectiveUpIn", { stagger: 75,duration:2000 });
    }
});