Validate Login & Redirect To Success Page Using Jquery Validate Plugin

I am new to advance level of jQuery scripting and here I am using jquery validation for my login page. If my login page was success it has to redirect to success page the code was

Solution 1:

Your code is broken for the following reasons...

1) You've incorrectly placed the success option inside of the messages option. The success option is a sibling of messages, not a child.

messages: {
    username: "Please enter a valid email address",
    password: {
        required: "Please provide a password",
        minlength: "Your password must be at least 5 characters long"
    },
    success: function (data) {  // <- does not belong inside of 'messages' option
        ....
    }
}

2) As per documentation, the success options is for: "If specified, the error label is displayed to show a valid element." In other words, only use success if you want the error label to also be shown when there is no error; like for a green checkmark effect.

3) Your success function has nothing to do with the intended purpose of the success option. What's the point of using a validation plugin if you're going to manually write a validation function? See my comments.

success: function (data) {
    if (username == 'john@xyz.com' && password == password) { // this is what the plugin does automatically when it evaluates the ruleswindow.location = "mainpage.html"; // this is already the 'action' part of your '<form>'
    }
    else {
        $('#username').focus();  // Again, the plugin already does this.
    }
}

Simply let the plugin operate as designed...

• When validation fails, you'll get a message and the field will come into focus.

• When validation passes, the form will submit and redirect to the mainpage.html URL as specified by the action="mainpage.html" attribute of your <form>.

Your jsFiddle updated...

http://jsfiddle.net/sparky672/ny9bt1ak/3/