jQuery Validation in an ajax loaded page

jQuery Validation in an ajax loaded page

Hi,

I have quickly built a system that loads pages dynamically through Ajax, and just replaces the body content everytime. It works and everything, but in some of the dynamically loaded pages I'm using forms that I want to validate using the jQuery Validation plugin, and display errors using qTip2. This all works fine on static pages, but I have tried to include it in the main template file and the dynamically loaded page, and it doesn't work at all. All the dependencies are correctly loaded, here is the jQuery validation and error displaying code (login.php) which is on the dynamically loaded page (which is where I would ideally like to put this code) :

  1. <script type="text/javascript">
    $(document).ready(function(){
        $('#login').validate({
            onkeyup: false,
            errorClass: 'error',
            validClass: 'valid',
            rules: {
                username: { required: true, minlength: 3, maxlength: 50 },
                password: { required: true }
            },
            messages: {
                username: {
                    "required": "Username is required !",
                    "minlength": "Username is too short !",
                    "maxlength": "Username is too long !"
                },
                password: {
                    "required": "Password is required !"
                }
            },
            errorPlacement: function(error, element)
            {
                var elem = $(element),
                    corners = ['right center', 'left center'],
                    flipIt = elem.parents('span.right').length > 0;

                if(!error.is(':empty')) {
                    elem.filter(':not(.valid)').qtip({
                        overwrite: false,
                        content: error,
                        position: {
                            my: corners[ flipIt ? 0 : 1 ],
                            at: corners[ flipIt ? 1 : 0 ],
                            viewport: $(window)
                        },
                        show: {
                            event: false,
                            ready: true
                        },
                        hide: false,
                        style: {
                            classes: 'qtip-youtube'
                        }
                    })
                    .qtip('option', 'content.text', error);
                }
                else { elem.qtip('destroy'); }
            }
        })
    });

    $("#login").submit(function(event) {
        if($("#login").valid()) {
            event.preventDefault();
           
            var jsSha = new jsSha($form.find('input[name="password"]').val());
           
            var $form = $( this ),
                username = $form.find('input[name="username"]').val(),
                password = jsSha.getHash("SHA-512", "HEX");

            $.post("post.php?action=login", {"username": username, "password": password},
                function(data) {
                    if(data['error'] == 1)
                    {
                        $("#message").remove();
                       
                        $(".form").prepend('<div id="message"></div>');
                       
                        $("#message").message({type: "error", dismiss: false, message: data['message']});
                       
                        $("#message").effect("shake", {times: 2, distance: 10}, 200);
                    }
                    else if(data['error'] == 0)
                    {           
                        $("#message").remove();
                       
                        $(".form").prepend('<div id="message"></div>');
                       
                        $("#message").message({type: "info", dismiss: false, message: data['message']});
                       
                        $("#message").effect("pulsate", {times: 2}, 200);
                    }
                }, "json"
            );
        }
        else
        {
            $("[id^=ui-tooltip-]").effect("pulsate", {times: 3}, 300);
            return false;
        }
    });
    </script>



























































































And here is the template page, which includes the different pages, and has all the dependencies for sub-page functionality :

  1. <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="UTF-8">
    <title>PHPAuth 2.0</title>
    <link href="css/reset.css" rel="stylesheet" type="text/css" />
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <link href="css/jquery.qtip.min.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.base64.min.js"></script>
    <script type="text/javascript" src="js/sha512.min.js"></script>
    <script type="text/javascript" src="js/jquery.validate.min.js"></script>
    <script type="text/javascript" src="js/jquery.qtip.min.js"></script>
    </head>

    <body>
    <div id="logo">
        PHP<span style="font-weight: bold; color: #C4C4C4;">Auth</span> 2.0
    </div>
    <div id="form">
    </div>
    <script type="text/javascript">
    function changePage(page)
    {
        document.getElementById("form").innerHTML = "<img src=\"img/loading.gif\" alt=\"Loading...\" />";

        if(page.length == 0) { page = "login"; }
       
        var jsSha = new jsSHA(page + navigator.userAgent);
        var hash = jsSha.getHash("SHA-512", "HEX");

        $.get("fetch.php", { "page": page, "hash": hash }, function(data) { document.getElementById("form").innerHTML = $.base64.decode(data); });
    }

    changePage('login');
    </script>
    </body>
    </html>







































Any help is greatly appreciated :)