JQuery validate not working on ajax loaded form

I have a form (with only 1 field) which is loaded via AJAX inside a div (id="area"). The form has a .validate function attached. But when it is not working. I have tried wrapping up the form by its parent container as shown below, but still unable to validate. Please let me how this can be fixed. This is the validate function -

$("#area").on("show", function () {

    $("#myform").validate({
        debug: true,

        rules: {

            TypeId: {
                required: true
            }
        },

        errorPlacement: function (error, element) {

            // changes icon to red if error

            var $icon = element.next();
            $icon.removeClass("glyphicon-asterik glyphicon-ok-sign successicon");
            $icon.addClass("glyphicon-remove-sign erroricon");
            $icon.css('opacity', '1.0');
        },

        success: function (label, element) {

            // changes icon to green if success

            var $icon = $(element).next();
            $icon.removeClass("glyphicon-asterik glyphicon-remove-sign erroricon");
            $icon.addClass("glyphicon-ok-sign successicon");
            $icon.css('opacity', '1.0');

        }
    })();

    return false;
});

Thanks in advance.