My Facebox pop-up contains a form with a submit button. I also have a second button to open an unrelated Facebox pop-up that was working before I added jQuery.validate to the project. I need to validate the email and password fields prior to being submitted.
I should add that these pop-ups are loaded via external .html files. This loaded them via AJAX request.
On index.html, the pop-ups are setup ($k is equal to jQuery.noConflict());
$k('a[rel*=example_2]').facebox_1({
loading_image : '/images/loading.gif',
close_image : '/images/closelabel.gif'
});
And the link clicked to open the above Facebox:
<a href="login.html" title="Log In" rel="example_2" id='login'>Log In </a>
And everything below is in login.html
The validation:
$(function () {
$('form[name="login"]').validate({
rules: {
email: { required: true, email: true },
password: "required"
},
messages: {
email: "",
password: ""
}
});
});
And the form:
<form name="login" method="post" action="login.aspx">
And the button that doesn't work
<a href="#" title="Register" onclick="showRegister()" ><img src="images/register.jpg" /></a>
Nick helped me get the form posting in this post, but it seems to have broken the other button. I'm having problems debugging the script, because I don't know if Firebug can set breakpoints in externally requested (via XHR) pages.
I tried adding a click handler to the broken button that just called showRegister(), and that didn't work either. showRegister()
simple calls $('#linkFromIndexDotHtml').click();
which is, in fact, a link from index.html. I thought that may be the problem, but it worked prior.