JSFiddle - React, Tailwind, and code Playground

by wookiehangover

HTML

<form>
    <input type="text" value=""/>
    <input type="submit"/>
</form>

JavaScript

(function($){

    $.fn.blah = function(options) {
        var settings = $.extend({}, $.fn.blah.defaultOptions, options);

        return this.each(function() {
            var $this = $(this),
                val = $this.val();
            
            if( $this[0].nodeName !== "INPUT" ) return false;
            
            if($this.val() === ""){
                // do your animation   
                $this
                    .animate({ marginLeft: "-10px" }, 50)
                    .animate({ marginLeft: "10px" }, 50)
                    .animate({ marginLeft: "-10px" }, 50)
                    .animate({ marginLeft: "10px" }, 50);
            }
        
            if( $.isFunction( settings.callback ) ) callback(val);    
                        
        });
    };

    $.fn.blah.defaultOptions = {
        animation: 'shake',
        callback: null
    };
        
})(jQuery);


$('input').blur(function(e){
    $(this).blah();
});

$('form').submit(function(e){
    var $this = $(this),
        error_state = true;
    
    
    $this.find('input').blah({ 
        callback: function(v){
            if( v === "") error_state = false;
        }
    });
    
    return error_state;
});