jQuery Validation not being called

Hello all,

First of all, jQuery is amazing, I love it, congratulations, you've done some great work. I've only just started really using it, but it's easy to get the grips of and understand.

I've just gone and encountered my first problem, resulting in sleepless nights of head scratching in front of my screen, looking for what I could change, but my knowledge doesn't cover all of jQuery just yet :)

I'm building a front end for a PHP Authentication system I'm building, I'm using jQuery, I'm using it successfully over the login, registration and activation pages to display error / success messages, hash the password before being sent, assign a cookie for the user and form validation.

The plugins used are the following :

jQuery Validation (http://bassistance.de/jquery-plugins/jquery-plugin-validation/) : Used for validating the form elements
jQuery qTip (http://craigsworks.com/projects/qtip2/) : Used for displaying validation errors next to form elements
jQuery Crypt (http://www.itsyndicate.ca/jquery/) : Used for hashing outgoing passwords

Here is the page code :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>PHPAuth 2.0 - Reset Password</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />

<link href="css/ui-lightness/jquery-ui.custom.css" rel="stylesheet" type="text/css" />
<link href="css/jquery.qtip.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.message.js"></script>

<script type="text/javascript" src="js/reset/jquery.validate.js"></script>
<script type="text/javascript" src="js/reset/jquery.qtip.js"></script>
<script type="text/javascript" src="js/reset/jquery.crypt.js"></script>
</head>

<body>
<div class="logo"></div>
<div class="form">
    <form id="reset" method="post">
        <input type="text" name="resetkey" id="password" placeholder="Reset Key" <?php if(isset($_GET['key'])) { echo "value=\"" . $_GET['key'] . "\" "; } ?>/>
        <input type="submit" id="reset" value="Reset Password" />
    </form>
</div>
<div class="small">
    <a href="?page=login">I know my password</a><br/>
</div>

<script type="text/javascript">
$(document).ready(function(){
    $('#reset').validate({
        errorClass: "errormessage",
        onkeyup: false,
        errorClass: 'error',
        validClass: 'valid',
        rules: {
            resetkey: { required: true, minlength: 20, maxlength: 20 }
        },
        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: 'ui-tooltip-red'
                    }
                })
                .qtip('option', 'content.text', error);
            }
            else { elem.qtip('destroy'); }
        },
        success: $.noop,
    })

    $('#resetpass').validate({
        errorClass: "errormessage",
        onkeyup: false,
        errorClass: 'error',
        validClass: 'valid',
        rules: {
            password: { required: true, minlength: 3, maxlength: 100 }
        },
        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: 'ui-tooltip-red'
                    }
                })
                .qtip('option', 'content.text', error);
            }
            else { elem.qtip('destroy'); }
        },
        success: $.noop,
    })
});

$("#reset").submit(function(event) {
    if($("#reset").valid()) {
        event.preventDefault();

        var $form = $( this ),
            resetkey = $form.find('input[name="resetkey"]').val();


        $.post("inc/action.php?a=reset2", {key: resetkey},
            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);

                    window.setTimeout(function()
                    {
                        $(".form").empty();
                        $(".form").append('<form id="resetpass" method="post"></form>');
                        $("#resetpass").append('<input type="hidden" name="resetkey" value="'+resetkey+'" />');
                        $("#resetpass").append('<input type="password" name="password" id="password" placeholder="New Password" />');
                        $("#resetpass").append('<input type="submit" id="reset" value="Reset Password" />');
                    }, 2000);
                }
            }, "json"
        );
    }
    else
    {
        $("[id^=ui-tooltip-]").effect("pulsate", {times: 3}, 300);
        return false;
    }
});

$("#resetpass").submit(function(event) {
    if($("#resetpass").valid()) {
        event.preventDefault();

        var $form = $( this ),
            pass = $().crypt({method:"sha1",source:$().crypt({method:"sha1",source:$form.find( 'input[name="password"]' ).val()})});


        $.post("inc/action.php?a=reset3", {password: pass},
            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>
</body>
</html>

So first of all, a form is displayed, where the user enters their Reset Key received via email, jQuery validates it successfully and ajax posts it to a php script which verifies it exists etc... and returns an error code (0 : No error / 1 : Error) and if there is an error, a message, encoded in json format.

This first step works fine. If the first step is successful, the user is displayed a message, then 2 seconds later the div .form is emptied via jQuery and refilled with a new form, where the user inputs a new password. No validation happens, and when you click submit, it isn't caught by jQuery. I would like jQuery to validate the input, catch the submit, ajax post it to the php script, and display the resulting error / success messages.

What am I doing wrong ?

Thanks in advance for any help, it's very appreciated :)

Topic Participants
cuonic
dkimbell13
Kevin Boudloche

jQuery Validation not being called

jQuery Validation not being called

Topic Participants

cuonic

dkimbell13

Kevin Boudloche