Jquery mobile form response handling - ajax

Question

I have a simple registration form using Jquery mobile & jquery-validate.
If the user enters a correct username and password, I redirect them to their dashboard.
If they miss a field the client side validation picks it up.
My problem is when the server side validation rejects the user registration.
For example the user name is all ready taken.
In this case I render the page on the server with an error message.
On the client side I see the original page transition out and the new page transition in.
The new page has the error message displayed correctly.
How ever my script to init the client side validation does not take effect.
My guess is that there are two elements with the same id on the page at the same time.
So the old one gets the validation run on it again and is then transitioned away.
How do I handle this?
Here is the script
$('#registerPage').live('pagecreate', function (event) {
$("#registerForm").validate({
rules: {
username: "required",
password: "required",
confirmPassword: {
required: true,
equalTo: "#password"
}
}
});
});

Answer 1

Fixed it by using the new page as the context for the validation selector.
var rps = rps || {};
rps.register = rps.register || {};
rps.register.validate = function (context) {
$("#registerForm", context).validate({
rules: {
username: "required",
password: "required",
confirmPassword: {
required: true,
equalTo: "#password"
}
}
});
};
$(document).on('pageshow', '#registerPage', null, function (event, ui) { rps.register.validate(); });
$(document).on('pagehide', '#registerPage', null, function (event, ui) { rps.register.validate(ui.nextPage); });