Why does JS alert kill my registration form? - php

Question

I just finished my first working registration form connected to a database. Actually, it's basically a copy of a tutorial demo # http://jqueryvalidation.org/files/demo/milk/ except I had to add the database stuff.
I still have one minor bug. The form doesn't work unless I delete this code:
// specifying a submitHandler prevents the default submit, good for the demo
submitHandler: function() {
alert("submitted!");
},
It's kind of trivial, but it would be nice if the user could see some sort of "Success" message when they click the Submit button. I didn't want to post all the code, but I have a live page # http://www.govwa.org/test/registration.php
This is the PHP code that I inserted just before the form closing tag:
include('config.php');
$pdo = connect();
// adding new member using PDO with try/catch to escape the exceptions
try {
$sql = "INSERT INTO g1_members (firstname, lastname, username, password, password_confirm, email) VALUES (:firstname, :lastname, :username, :password, :password_confirm, :email)";
$query = $pdo->prepare($sql);
$query->bindParam(':firstname', $_POST['firstname'], PDO::PARAM_STR);
$query->bindParam(':lastname', $_POST['lastname'], PDO::PARAM_STR);
$query->bindParam(':username', $_POST['username'], PDO::PARAM_STR);
$query->bindParam(':password', $_POST['password'], PDO::PARAM_STR);
$query->bindParam(':password_confirm', $_POST['password_confirm'], PDO::PARAM_STR);
$query->bindParam(':email', $_POST['email'], PDO::PARAM_STR);
$query->execute();
} catch (PDOException $e) {
echo 'PDOException : '. $e->getMessage();
}
Does anyone have a hunch what the problem might be? Alternatively, is there another way of displaying a message when someone clicks the Submit button?

Answer 1

The submitHandler replaces the default submit, so the form is never submitted when you add that handler, you have to do it manually.
From the documentation
Callback for handling the actual submit when the form is valid. Gets
the form as the only argument. Replaces the default submit. The right
place to submit a form via Ajax after it is validated.
either remove it, or submit the form once valid in the handler
submitHandler: function(form) {
alert("submitted!");
form.submit()
},